Как использовать шрифты Google Fonts на вашем сайте

Ещё несколько лет назад web был полон скучными стандартными шрифтами, часть из них вообще не является читабельной. Это было сделано для того, что бы исключить отсутствие шрифтов на веб-страницах и привести всех к единому формату. Конечно же это нравилось не всем и стали появлятся подгружаемые шрифты, так же стали появляться сторонние сервисы, предоставляющие API для шрифтов. Но их стабильность и выбор самих шрифтов оставляли желать лучшего. Тем более встала проблема с лицензированием самих шрифтов. А некоторые сервисы, такие как Type Kit предоставляют такие услуги за деньги, к примеру $49-$99 за то, если вы хотите использовать шрифты более чем на одном сайте, тем более выбор даётся только из 230 шрифтов в бесплатной версии.

Но затем появился сервис Google Fonts, который легко и быстро предоставляет каждому пользователю выбор из 808 шрифтов, прямо со своих серверов. У этого сервиса огроменое количество преимуществ, таких как сам выбор шрифтов, это не просто подборка обыкновенных шрифтов — это подборка элегантных, читабельных и просто красивых шрифтов для вашего веб сайта. Это ещё и уверенность в том, что эти шрифты всегда быстро загрузятся на страницу пользователя, как никак, а сервера о Google практически никогда не дают сбоев в работе. Выбор шрифтов действительно потрясающий и с каждым днем становится всё больше и больше. Зайдя на сам сайт, вы в этом убедитесь.

Но как и все шрифты, у них есть свои недостатки. Как известно не все из шрифтов поддерживают кириллицу и другие не латинские шрифты. А их довольно много, к примеру на некоторые языки, такие как арабский имеет всего 16 шрифтов из 808. Так что прежде, чем выбирать шрифт для своего сайта, убедитесь, что он поддерживает кириллицу. Сделать это можно довольно просто. Просто в боковой панели Google Fonts, выберите Languages и затем нажмите на Cyrillic. Таким образом вы исключите неприятные ситуации со шрифтами на вашем сайте. Сейчас доступно 68 шрифтов из 808, что довольно неплохой показатель. Но если вам требуются только латинские буквы, то смело убирайте фильтры, все шрифты поддерживаемые.

После того, как вы выбрали нужный шрифт. Нажмите на плюсик над ним и выберите его настройки. Вставить шрифт в страницу можно несколькими способами, прямо в HTML или через CSS. Для наглядного примера, мы выбрали кириллический шрифт Roboto Slab, он довольно популярный и довольно читабельный, так что это один из лучших выборов. Первым делом зайдите в Customize и выберите внутренние настройки — Cyrillic и Cyrillic Extended. По нужде можете выбрать размер жирности, но это можно изменить уже в самом CSS при разработке страницы и кстати рекоммендуется это делать там.

Далее мы видим довольно простой код CSS и HTML для вставки на сайт. Вы, как описано выше можете выбрать из 2х вариантов. Рассмотрим первый, прямая вставка кода на страницу HTML. В <head> сайта, вставьте код выданный Google Fonts, а затем на выбор, как вы любите пропишите в <style> для <body> font-family: 'Roboto Slab', serif; 

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

Второй вариант самый удобный и даёт больше возможностей для прямо работы с текстом. Просто пропишите font-family: 'Roboto Slab', serif; в любом CSS селекторе.

На данный момент Google Fonts бета версию собственных эффектов и возможностей работы со шрифтами посредством запросов и работы CSS. Но об этом мы напишем в других статьях по работе со шрифтами.

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

5 SEO советов по оптимизации видео. Как ранжируются видео и как их продвигать

Как получить обратные ссылки на блог из весомых источников

Новое представление расширенных сниппетов Google

Что такое контент-мэппинг и зачем он нужен

Получай лучшие статьи по
интернет-маркетингу на
свою почту