Используя пресеты шрифтов от 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. Подключение шрифта на сайт
Два варианта подключения шрифта, выбор за вами:
1) В тег head
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&subset=cyrillic" rel="stylesheet">
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&subset=cyrillic');
Шаг 4. Использование стороннего шрифта в CSS
font-family: 'Roboto', sans-serif;
Запасной шрифт
Шрифты указываются через запятую, с понижением приоритета. Каждый последующий шрифт будет использоваться, в случае если предыдущий по какой-либо причине не может быть отображен.
Допустим, если CDN google приляжет на покой, то шрифт Roboto не загрузится и будет использован sans-serif. В таком случае получается что sans-serif — это запасной шрифт. В количестве запасных шрифтов никто не ограничивает.
Но при его выборе нужно учесть ряд факторов:
- Запасной шрифт должен быть «безопасным»;
- Запасной шрифт должен быть максимально похож на заменяемый шрифт.
Подробнее об этом Вы можете прочитать в статье «Как выбрать безопасный шрифт».
При написании названий шрифтов нужно руководствоваться следующими правилами:
- Все сторонние шрифты должны быть обрамлены в кавычки что бы четко ограничить место начала названия шрифта и его конец;
- Шрифты должны быть разделены запятой;
- Запасной шрифт должен иметь такие же начертания как и базовый(основной).
Какой файл в итоге мы получили от GoogleFonts?
Взглянем на файл CSS.
В файле подключены файлы шрифтов для разной толщины и стиля. Рассмотрим подробнее один из блоков кода:
1. /* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
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 будет вполне достаточно для корректного отображения в разных браузерах.
Большим плюсом можно считать наличие проверки на установленные локально шрифты. Это может значительно сократить вес шрифта для пользователй, которые уже установили его на свой ПК.
Материал: КонстантинОстровский
