Как добавить шрифт из google fonts

Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу написать небольшую заметку про то, как можно расширить список шрифтов для сайта, использование которых не вызовет никаких проблем с отображением в браузерах пользователей с помощью сервиса Google Font .

По умолчанию при верстке вы можете использовать только те шрифты, которые будут наверняка установлены на компьютере всех ваших посетителей, но иногда хочется подключить что-нибудь более красивое.

Как известно, стандартный набор, поддерживаемый любым браузером, состоит из Arial, Verdana, Times New Roman, Georgia, Trebuchet MS, Courier New, Comic Sans MS и еще нескольких вариантов, которые предустановлены практически по всех операционных системах компьютеров пользователей. Более подробную информацию для различных ОС вы можете посмотреть .

Шрифты из онлайн сервисов для компьютера и сайтов

По большому счету у вас, как у вебмастеров, может быть два основных способа использования шрифтов — установка их на свой компьютер, а так же использование на своем сайте. По умолчанию в Windows имеет место быть уже достаточное их количество, но вы вольны их добавлять самостоятельно, а так же свою лепту в пополнение этого списка вносят программы, которые устанавливаете.

Как то я помогал знакомому разбираться в премудростях компьютерной грамотности и обратил внимание, что у него в выдаче Яндекса все отображается наклонным шрифтом. Воспринималось это довольно-таки тяжело, но он меня уверял, что вполне уже привык к такому безобразию и даже гордился тем, что у него каким-то образом получилось так сделать.

Смена браузера не привела к изменению сложившейся ситуации и я подумал, что, скорее всего, дело в шрифтах. Для этого я зашел в их настройки, выбрав пункт одноименный пункт в «Панели управления» Windows (обычно она живет в меню кнопки «Пуск»). Хотя можно было просто зайти через проводник в папку C:WINDOWSFonts.

Ну, и действительно пытливый ум моего знакомого зачем то посоветовал ему удалить Arial Обычный, вместо которого для выдачи Яндекса подгружался оставшийся в системе Arial Курсив. Исправить ситуацию можно было, всего лишь скачав нужный шрифт из интернета и установив его стандартным образом.

Для скачивания шрифтов я обычно использую онлайн сервис Xfont.ru , где имеется алфавитный указатель и строка поиска (те, кто пришел почитать про Google Font, прокрутите страницу чуток ниже или чуток подождите, пока расскажу основы).

Собственно, используете поиск в Xfont и переходите на страницу с нужным вам шрифтом, где жмете на кнопку Скачать. При этом вы получаете уже готовый к установке файл. Обычно они имеют расширения либо.ttf (TrueType — удобны тем, что на экране и на печати выглядят одинаково), либо.otf (OpenType), либо.fon.

Теперь через проводник или панель управления заходите в папку Fonts (C:WINDOWSFonts) и щелкаете правой кнопкой мыши по пустому месту. Из контекстного меню вам нужно будет выбрать самый нижний пункт «Установить шрифт» .

Ну, а в открывшемся окне находите только что скачанный файл, выделяете его и жмете на кнопку «Установить»:

Собственно, все. Нажмите F5 для обновления списка в папке Font и увидите новичка. Для появление его в ваших программах типа Ворд или Фотошоп ничего дополнительно делать не нужно, разве что только перегрузить эти программы, если на момент установки шрифта они были открыты. В общем, с этим делом никаких сложностей возникнуть не должно — скачали, установили и можно пользоваться.

Когда у вас возникает необходимость найти подходящую гарнитуру (не важно для своего интернет проекта или же для компьютера), то скорее всего вы будете искать их на каких-либо онлайн сервисах, которых довольно много в сети, и особых проблем с этим не возникнет. Сложности возникают именно с прикручиванием шрифтов к вебсайту и здесь нам как раз и пригодится Google Font.

Т.о. проблема использования на сайте любого понравившегося вам красивого шрифта упирается в основном в его наличие или отсутствие на компьютере пользователя, просматривающего ваш ресурс. В принципе, проблема может быть решена простым добавлением набора альтернативных вариантов в файле стилей CSS (перечисляются через запятую).

Например, если вы указали в файле таблиц каскадных стилей для какого-то фрагмента текста определенный шрифт, который может отсутствовать на компьютере определенной части пользователей, просматривающих ваш ресурс, то допишите в через запятую еще несколько вариантов, которые будут использовать в случае отсутствия нужного:

Font-family:Arial, Helvetica, sans-serif;

Font можно записать и в виде сборного правила, например, так:

Font:bold 11px Arial, Helvetica, sans-serif;

В обоих случаях, если на компьютере пользователя не будет установлен Arial (и такое бывает), то будет использоваться для отображения нужного участка текста Helvetica, а если и он на компьютере посетителя будет отсутствовать, то возьмется любой из семейства Sans Serif (без засечек), найденный среди установленных шрифтов у этого посетителя вашего ресурса.

Но это все же по большей степени компромисс. Однако, безвыходных ситуаций не бывает, и тут на сцену выходит относительно недавно появившийся онлайн сервис от всеми нами уважаемого и любимого Гугла ().

Сей гигант анонсировал свое собственное решение, позволяющее расширить набор красивых онлайн шрифтов (в том числе и русских, то бишь кириллических), которые можно будет без проблем использовать и не бояться их некорректного отображения в браузерах пользователей. Сейчас этот чудо сервис носит гордое имя Google Font .

Давайте я сначала опишу вам общую идею, предложенную и реализованную Гуглом, а потом мы рассмотрим все это в подробностях. Итак, этот лидер мирового поиска создал специальный онлайн сервис, где вы сможете выбрать шрифт, который вам больше всего понравится (количество доступных постоянно увеличивается и среди них уже присутствуют кириллические в достаточном для выбора количестве).

Там же вы можете получить все инструкции по подключению любого приглянувшегося вам шрифта (все очень просто до банальности), а так же вам предложат несколько вариантов их подключения к сайту и полный набор CSS свойств, которые останется только добавить в файл стилевой разметки.

Но каким же образом шрифт будет прикручен к сайту? Ну, конечно же, он будет подгружаться по мере необходимости с серверов Google. Гугл имеет огромные технические мощности и вы можете быть спокойны за то, что задержки с подгрузкой не возникнет.

К тому же, если пользователь уже побывал на ресурсах использующих Google Font API , то нужные шрифты скорее всего уже будут в кэше его браузера.

Сам по себе Google Font API абсолютно бесплатный и динамично развивающийся в направлении увеличения количества поддерживаемых красивых, необычных и вычурных шрифтов, которые распространяются по свободной лицензии, и сам по себе данный способ их подключения к сайту будет кроссбраузерным по умолчанию.

По первой из обведенных на скриншоте ссылок вы сможете ознакомиться с принципами работы, а по второй — попадете, собственно, туда, куда и требуется — в хранилище онлайн фонтов, которые можно будет прикрутить к своем проекту, ну или, при желании, установить на свой компьютер.

Google Font — русские шрифты для компа и код для сайта

Сначала вы можете зайти на страницу Google font , где приведены в наглядном виде все имеющие варианты шрифтов не только для сайта, но и для вашего компьютера, если вы вдруг захотите их у себя использовать. Для просмотра доступных кириллических вариантов перейдите на соответствующую вкладку из левого меню:

Русских шрифтов там уже достаточно много (в районе пяти десятков), но лиха беда начала. Думаю, что со временем вам будет из чего выбрать, хотя набор латинских вариантов в Гугл Фонте уже сейчас впечатляет (более шести сотен).

По умолчанию, для каждого представленного там шрифта выводится одна строчка текста напечатанная с помощью него, чтобы вы могли оценить начертание. Однако, можно будет увидеть и параграф текста набранный ими, и одно слово — все это выбирается с помощью расположенных вверху вкладок:

Если вы хотите добавить некоторые из русских шрифтов к себе на компьютер , то вам нужно будет нажать на синюю кнопочку расположенную под ними, чтобы они попали в вашу коллекцию. После того, как все интересное вы добавите, то жмите на кнопочку в виде направленной вниз стрелочки, расположенной в правом верхнем углу:

В результате откроется окно, где сможете скачать все выбранные вами русские (или латинские, но главное, чтобы красивые) шрифты, запакованные в один Zip архив. На своем компьютере вы его распакуете и проведете установку в соответствие с описанным выше алгоритмом.

Так же вам предлагают скачать программку для работы со шрифтами от Гула под названием SkyFonts, но я чего то сильно сомневаюсь в ее особой ценности.

Как я уже говорил выше, все это великолепие можно будет прикрутить к своему сайту. Представьте, как будет выделяться ваш проект, если его заголовки будут выводиться рукописным шрифтом или еще каким-то образом отличающимся от принятых по стандарту Arial, Verdana, Times New Roman, Georgia, Trebuchet MS, Courier New или Comic Sans MS. Во всяком случае, попробовать стоит.

Единственное «но». Чем больше красивых шрифтов вы захотите подключить к своему сайту с помощью этого сервиса Гугла, тем большее влияние на скорость открытия ваших страниц они будут оказывать. Следует соблюдать в этом деле меру, да и слишком уж аляписто будет выглядеть проект при этом.

Собственно, Google Font вас обязательно предупредит о слишком большом количестве подключаемых гарнитур. Итак, сначала удаляете все , что вы надобавляли в свою коллекцию при скачивании и установки этих шедевров на свой компьютер (см. скриншот ниже).

Потом еще раз внимательно проходитесь по списку кириллических фонтов и добавляете в коллекцию только те, которые реально хотите подключить и использовать на своем вебсайте. Можно будет, конечно же, попробовать и много добавить в коллекцию, чтобы оценить их вид непосредственно на страницах проекта, но потом обязательно вернитесь в Google Font и удалите лишнее.

Итак, коллекция собрана. Теперь щелкаете по кнопке «USE» в правом нижнем углу:

Сразу оговорюсь, что если вам нужен только один шрифт из этого онлайн сервиса, то добавлять его в коллекцию не обязательно, а достаточно будет лишь нажать на показанную на скриншоте кнопочку. Но не суть важно, ибо в результате откроется одно и то же окно.

На первом шаге мастера вам будут показаны все те замечательные фонты, которые добавили в коллекцию (или только один, если вы коллекции не создавали).

Для каждого из них вы можете еще поставить галочки, чтобы подгружались его курсивные, жирные и прочие начертания. Хотя, на самом деле, этого делать не стоит, ибо все это в два клика можно будет задать в вашем файле CSS и не подгружать . Помечаете галочкой только Нормал и все, остальное сами оформите.

Естественно, что чем больше шрифтов вы захотите подключить к сайту и чем у большего числа вариантов поставите галочки, тем менее поворотливыми станут страницы вашего проекта. Что замечательно, Google Font нас честно об этом предупреждает и наглядно показывает в виде датчика нагрузки на страницу , расположенного правее.

В моем примере, я вышел из зоны комфорта и незаметности подгрузки всех выбранных мною фонтов. Наверное, вам так делать не стоит. Ладно, прокручиваем страницу ниже и на втором шаге выбираем, какие именно языки нам нужны (думаю, что стоит отметить латиницу или кириллицу, или же одного русского вариант будет достаточно). Обратите внимание, что на эти галочки стрелочка нагрузкомера тоже реагирует.

1. Самый очевидный из них первый, который реализуется с помощью (служебной гиперссылки). Его нужно будет вставить в шаблон вашего ресурса в область между открывающимся и закрывающимся тегом HeaD (читайте подробности чуть ниже).
2. Второй вариант предлагает использовать директиву , которую надо будет дописать в ваш стилевой файл. В общем то, метод этот современный и по приведенной ссылке вы можете посмотреть наглядный пример использования @import при блочной верстке простейшего макета.
3. Третий вариант предлагает вам использовать код ДжаваСкрипта, который опять же можно будет вставить в область между открывающимся и закрывающимся тегом HeaD, либо вынести в отдельный файл скриптов.js, если понимаете о чем я говорю. В серии статей про я писал, что один общий файл стилей был бы полезен.

Ну, и на четверном шаге вам подскажут, как можно будет определенному фрагменту текста, заголовку или еще какому элементу назначить отображение с помощь данного шрифта. Делается это, естественно, с помощью CSS свойства font-family или сборного правила font по правилам, которые описаны в приведенной чуть выше статье.

Настоятельно советую с ней ознакомиться, ибо я там постарался все разжевать до очень удобоваримого состояния. Ну, а для того, чтобы понять, как именно указать тот элемент, для которого этот шрифт будет подключаться, вам не обойтись без селекторов. Знаете что это такое? Если нет, то эта серия статей, надеюсь, внесет необходимую ясность:

При задании шрифтов указывают их размеры в различных единицах измерений, поэтому вам не помешает, наверное, ознакомиться с ними (при желании, конечно же) — .

Для быстрых экспериментов советую попробовать использовать , который нужно будет вставить в нужный тег. Например, я вставил его в код одного из заголовков этой статьи и прописал в него предложенное в Google Font CSS свойство:

Текст заголовка, где оперативно меняем шрифт

И, конечно же, я подключил нужный онлайн шрифт (Stalinist One) с помощью добавления строки:

в файл header.php из папки с моей темой оформления, которую я в данный момент использую на своем Вордпресс блоге. В результате, после перезагрузки страницы, получил такой вид одного из подзаголовков:

Однако, сейчас я убрал служебную гиперссылку Link из файла header.php, но идущий вслед за этим абзацем заголовок все равно использует шрифт «Stalinist One» подгружаемый с Google Font. Как так получилось? Просто я в начало статьи вставил этот самый Link — в тексте он никак не отображается, но нужный фонт с Гугла исправно подгружает. И еще я добавил ему наклон через font-style.

Так что Гугл фонтами можно использовать и локально, а не для всех страниц проекта.

Как установить красивые онлайн шрифты на сайт?

Итак, для того, чтобы добавить новый шрифт взятый в Google Font на сайт, сначала нужно будет подключиться к своему ресурсу по FTP, например, с помощью ФайлЗиллы, которую я использую сам. В статье про этот ФТП менеджер я добавил в конце способ сделать его по настоящему безопасным в плане .

Если используете Зилу, то не примените полюбопытствовать по поводу повышения ее безопасности, ибо мне, из-за моей беспечности, сумели подбросить вирус на комп, который и почти все мои проекты в той или иной степени пострадали от внедренных зловредов, с чем я боролся чуть ли не полгода.

Для блога на WordPress вам нужно открыть на редактирование файл Header.php из папки с используемой вами WordPress темой, о назначении шаблонов которой читайте . Найти ее можно по этому пути:

Wp-content/themes/название темы WordPress

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

");">

Вам может быть интересно

1. - безусловный лидер рейтинга. Содержит полный набор 897 символов. Имеет отличные характеристики, разборчив. Оптимизирован под различные устройства. Его дизайн практически идентичен Droid Sans, за исключением более широких символов и наличием курсива. В то время как Droid Sans в основном используется в пользовательских интерфейсов некоторых Android устройствах.

2. - этот чистый шрифт мир впервые увидел с появлением операционной системы Android Ice Cream Sandwich. Семейство данного шрифта включает регулярные и курсивные стили, тонкий, легкий, регулярный и суженный ширины (condensed). По своей структуре явно напоминает не менее известный шрифт Helvetica . Начиная с 15 мая 2013 г. данный шрифт компания Google начал интенсивно использовать в своих популярных продуктах таких как: Google+, Google Play, Google Maps.

3. - содержит в себе четыре варианта стиля, что тем не менее не мешает ему занимать лидирующие позиции по популярности. Толчок к развитию данного шрифта дала Роспечать, которая поставила цель создать шрифт поддерживающий все различные варианты кириллицы, используемой на языках национальных меньшинств России. Шрифт PT Sans включает в себе символ российского рубля .

4. - этот шрифт мир впервые увидел в составе операционной системы Ubuntu ее версии 10.10. Доступен в четырех версиях: обычный, курсив, полужирный, полужирный курсив на английском языке и на кириллице. Начиная с 26 апреля 2011 г. он включен для использования в сервисе Google Docs.

5. Arimo - данный шрифт вошел в состав Chrome OS. Еще одна допустимая альтернатива Helvetica.

8. Cuprum - универсальный шрифт. Представляет собой зауженный гротеск. Доступен в четырех вариантах начертаний.

Спонсор материала.
Кондиционеры в интернет-магазине http://www.technodom.kz/catalog/konditsionery . Кондиционеры — лучшие товары, кредитование, огромный выбор, безупречный сервис.

Добрый день дорогие читатели. Все из вас, наверно, мечтают сделать свои или клиентские сайты более лаконичными и привлекательными.

Одними из главных факторов, который отвечает за восприятие информации на сайте, являются шрифты и то, как мы их используем вместе. Так как на одном сайте, чаще всего употребляется двое и более разновидностей шрифтов, например для заголовков и просто основного текста.

Одна из возможностей, визуально улучшить читаемость текстов – это подключение сторонних шрифтов. Ведь все наверно знают, какая «бедная» стандартная коллекция кириллических шрифтов в Windows, которая отвечает за отображение текста в браузере.

Стандартные шрифты:

Cufon и @font-face

Ранее я уже писал про , с помощью которого можно подключать не стандартные шрифты к сайту. А сейчас рассмотрим более простой способ — это правило @font-face в css и подгрузкой самого шрифта с хранилища шрифтов Google Fonts.

Вся разница между Cufon и @font-face в том, что первый использует js для эмулирование шрифта и прорисовывает символы своими средствами, а @font-face подгружает сам шрифт на компьютер посетителя и браузер уже использует его для отображения текста.

В любом случае Cufon и @font-face уменьшают скорость загрузки сайта, хоть и не значительно.

Использование Google Fonts на сайте

Не буду расписывать много и долго, я приведу конкретный пример подключения Google Fonts, на примере этого блога.

Как видите, заголовки статей и подзаголовки у меня выполнены в не стандартном шрифте, вот сейчас на практике я покажу как такое сделать, а вы уже по аналогии будете пробовать на своих сайтах.

Выбор шрифта в репозитории

Чтобы не пугались, объясню — репозиторий это хранилище, но по-буржуйски:). И так, заходим на http://www.google.com/fonts/ и смотрим для себя подходящий шрифт:

Не много по меню:
Слева, как видите, находиться блок с всевозможными фильтрами поиска шрифтов, в котором вы можете выбрать, к примеру, только латинские шрифты или кириллические. А сверху, настройки по отображению примеров, которые разделены на 4 вкладки:

• Word — отображение нескольких букв. В таком режим удобно сравнивать сразу много шрифтов и смотреть как выглядят конкретные символы;
• Sentence — отображение в виде одного предложения;
• Paragraph — выводиться большой кусок текста, который позволит наглядно сравнивать шрифт уже в самом тексте;
• Poster — отображаются заголовки, такой способ сравнения удобен для подбора шрифта, который будет использоваться в заголовках.

Подключение шрифта к сайту

После этого, на панели Collection, которая находиться внизу, заходим во вкладку Use, которая отвечает за использование шрифтов из вашей коллекции. Тут вы сразу увидите, что гугл показывает на сколько ухудшится скорость загрузки страницы:

Ниже находится панель с выбором «типа отображения», выбираем Latin (latin) и Cyrillic (cyrillic), что даст нам возможность отображать как латинские, так и кириллические буквы:

После этого переходим к третьему пункту на этой странице, а именно к самому подключению. Google предлагает нам три варианта встраивания своих шрифтов — через js, стандартный способ через подключение в и @import в css файле. Я использую последний способ.

Открываем свой файл css и прописываем строчку, которую нам предоставил google:

Всё, шрифт от Google Fonts мы подключили к сайту, теперь как его использовать?

Использование в CSS

Всё достаточно просто, после того, как мы подключили шрифт через @import , нам надо прописать стандартные инструкцию для тех классов и индификаторов, у которых будет использоваться наш новый шрифт. К примеру:

h1, h2, h3 {font-family: ‘Cuprum’, sans-serif;}

После всех этих манипуляций, у вас будет выводиться заголовки с новым, не стандартным шрифтом.

На этом всё, спасибо за внимание и до скорых встреч.

Google Fonts — один из самых крупных архивов реально с сотнями гарнитур. Учитывая его универсальный характер и всеобщую доступность, теряется практически любой смысл использования обычных шрифтов по умолчанию. С помощью сервиса вы сможете реализовать разные нестандартные примеры .

В данной статье найдете подборку из 10-ти бесплатных шрифтов Google Fonts, которые идеально подойдут для оформления заголовков сайта. Они установлены во многих веб-проектах по всему миру. Материал является переводом этой заметки от Jake Rocheleau.

Если вы не ориентируетесь как именно подключать данную функциональность, можете глянуть пост о — там есть парочка примеров.

1. Montserrat

Поскольку полужирные вариации очень темные, применять Catamaran нужно только в заголовках с большими размерами. Он неплохо выглядит практически в любом случае, но иногда создается ощущение слишком тяжелого и плотного шрифта.

7. PT Sans

Если используете Вордпресс CMS в своем веб-проекте, то советуем почитать заметку про подключение шрифтов в WordPress , где также рассмотрен и метод с Google Fonts.

На сайтах html, как правило, встречаются стандартные шрифты. Например

• Arial ;
• Verdana ;
• Times New Roman ;
• Georgia ;
• Trebuchet MS ;

Некоторым вебмастерам они покажутся через чур простыми и скучными, поэтому многие ищут варианты как можно сделать шрифт на сайте необычным, красивым и т.п. Можно самостоятельно искать шрифты на просторах интернета или гораздо проще воспользоваться самым крупным сервисом по шрифтам Google Fonts: https://fonts.google.com

Что такое Google fonts

Google fonts - сервис универсальных шрифтов для сайта. Шрифт можно откорректировать в режиме онлайн и сделать его таким, каким вы захотите, после чего подключить его к сайту и использовать

Для начала рассмотрим небольшую инструкцию как создать шрифт на Google fonts.

Как создать шрифт на Google fonts

Перейдя на страницу https://fonts.google.com Вам предстоит либо выбрать готовый шрифт, либо создать свой. Рассмотрим кратко элементы меню.

В левом блоке можно сразу с помощью фильтра отсеять ненужные шрифты:

• Серия шрифтов Serif (с засечками)
• Серия шрифтов Sans Serif (без засечек)
• Серия шрифтов Display (дисплей)
• Серия шрифтов Handwriting (рукописный)
• Серия шрифтов Monospace (моноширинные)

Потом так же можно отсеять по следующим критериям:

Таким образом, выбираете понравившиеся шрифты. Каждый из них можно отредактировать: изменить толщину шрифта, выбрать поддерживаемые языки и т.п.

Например, вам понравился следующий шрифт:

Как добавить шрифт Google fonts на сайт

Чтобы подключить шрифт от Google fonts к себе на сайт даже не обязательно использовать правило @font-face . Делается все проще.

В правом нижнем углу будет окно, куда добавляются все понравившиеся вам шрифты. Вы можете как легко добавить туда шрифт, так же легко и удалить его от туда. Например:

После выбора шрифта Google Вам сам предложит 2 варианта html-кода для вставки (standart и import). Чаще всего используют первый вариант через link:

... ...

А в CSS надо прописать

body { font-family : newfamily , Ariel ; }

Стоит так же обратить внимание на параметр во вкладке "Customize" - Load Time (Fast). Попробуйте включать и отключать галочки. В зависимости от этого загрузка будет либо быстрая, либо медленная.

Естественно нужно стремится к быстрой загрузке.

Примечание

Несмотря на удобство использования шрифтов от Google fonts, есть недостаток: шрифт нужно подгружать на сайт. Это в свою очередь создает лишнюю зависимость от качества работы сервера fonts.googleapis.com. По моему опыту я знаю, что иногда он тормозит работу сайта. Я полностью отказался от использования сторонних шрифтов.