Как правильно подключить шрифт от GoogleFonts

23/02/2018
Konstantin Ostrovsky

Используя пресеты шрифтов от google fonts разработчики редко заглядывают в код генерируемого css файла. А зря, там самое интересное.

Я хочу рассказать как избежать распространенных ошибок при подключении сторонних шрифтов и правильно использовать его в CSS.

 

Решил поиграть с шрифтами - проиграл

 

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

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

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

Как правильно подключить шрифт с GoogleFonts и использовать его в CSS?

Для этого нужно иметь базовые знания о типографике. Об это можно почитать в статье "Типографические термины, и зачем мне это знать?".

Рассмотрим подключения шрифта с GoogleFonts на примере самого популярного шрифта для блогов из семейства Roboto - Roboto.

Шаг 1. Определимся с необходимым набором свойств

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

Чтобы определиться с первым параметром, нужно выяснить какие типы шрифта будут использоваться на сайте(толщина шрифта). Чаще всего достаточно набора "regular, regular italic, meium, bold". Гораздо реже на сайтах используют "light" и совсем редко "thin". По причине недостаточной читабельности, так как это уж очень тонкие начертания.

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

Если вы не привыкли к обозначению толщины шрифта при помощи "thin, light, regular, meium, bold". Вот таблица соответствий толщины веб шрифтов (font-weight):

Значение - название

100 - Thin (Hairline) - Тонкий
200 - Extra Light (Ultra Light) - Дополнительный светлый (Сверх светлый)
300 - Light - Светлый
400 - Normal - Нормальный
500 - Medium - Средний
600 - Semi Bold (Demi Bold) - Полужирный
700 - Bold - Жирный
800 - Extra Bold (Ultra Bold) - Дополнительный жирный (Сверх жирный)
900 - Black (Heavy) - Черный (Густой)

Шаг 2. Выбираем необходимые языки

Выбираем Latin и если на сайте планируется использовать кириллицу (русские символы), то выбираем еще Cyrillic.

Шаг 3. Подключение шрифта на сайт

Казалось бы все понятно. Скопировал тег link и вставил в head. Советую подключать шрифты не в head, а импортировать через css. Это позволит добиться лучшей скорости работы и получить лучший бал от Google.

Два варианта подключения шрифта, выбор за вами:

1) В тег <head>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&amp;subset=cyrillic" rel="stylesheet">

2) Подключение в общий файл стилей. В начало файла css нужно добавить код:

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&subset=cyrillic');

Внимание! Шрифт должен быть подключен до его использования в коде.

Код подключения генерирует GoogleFonts, его можно скопировать на вкладке "Embed", выбрав тип подключения "STANDARD" или "@IMPORT".

Шаг 4. Использование стороннего шрифта в CSS

GoogleFonts предлагает нам использовать шрифт так: 

font-family: 'Roboto', sans-serif;

Но что тут делает 'sans-serif'?

Запасной шрифт.

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

Допустим, если CDN google приляжет на покой, то шрифт Roboto не загрузится и будет использован sans-serif. В таком случае получается что sans-serif - это запасной шрифт. В количестве запасных шрифтов никто не ограничивает.

Но при его выборе нужно учесть ряд факторов:

  1. Запасной шрифт должен быть "безопасным";
  2. Запасной шрифт должен быть максимально похож на заменяемый шрифт.

Подробнее об этом Вы можете прочитать в статье "Как выбрать безопасный шрифт".

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

 

Что за файл в итоге мы получили от GoogleFonts?

Взглянем на файл CSS.

В файле подключены файлы шрифтов для разной толщины и стиля. Рассмотрим подробнее один из блоков кода:

1. /* cyrillic */
2. @font-face {
3.   font-family: 'Roboto';
4.   font-style: italic;
5.   font-weight: 400;
6.   src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format('woff2');
7.   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
8. }

1 - Комментарий, описывающий какой шрифт будет подключен в правиле @font-face ниже. В данном случае это кириллица.

3 - Названия шрифта, для дальнейшего его использования в CSS.

4 - Стиль шрифта. italic - наклонный.

5 - Толщина шрифта. 400 - normal.

6 - Свойство local - название шрифта на локальном ПК. Если на ПК установлен шрифт "Roboto Italic" или "Roboto-Italic", то он будет использован. Если же шрифт не установлен - он будет загружен по "url".

7 - Диапазон кодов Unicode указывает на использование шрифта.

 

Итак. Что в итоге? Нельзя не назвать странным, что GoogleFonts предоставляет для загрузки только шрифты формата woff2. Игнорировав при этом такие форматы, как SVG, TTF, woff...
Полагаю, можно довериться многолетнему опыту Google и сделать вывод что woff2 будет вполне достаточно для корректного отображения в разных браузерах. 

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

 

Подробнее о самостоятельной конвертации ttf шрифта в веб шрифт, вы можете прочитать в статье "Рецепт идеального @font-face".