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

Используя пресеты шрифтов от 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 */
 @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 будет вполне достаточно для корректного отображения в разных браузерах. 

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

Материал: КонстантинОстровский

Свежие записи
Команда MD

Команда md позволяет создавать каталог или промежуточные каталоги в указанном

Интернет
help2site
Купить планшет за границей

Заказать планшет IPAd Купить планшет за границей стало намного проще и безопаснее, сегодня я хочу рассказать вам, как это можно осуществить. Сами понимаете, что в интернете

Web-Дизайн
help2site
Отличительные черты работы с CMS WordPress

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

Оборудование
help2site
Оперативная память, различия, специфика, установка

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

Игры
help2site
Играть бесплатно в игры Gaminator

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

Web-Дизайн
help2site
Добавление пользователя Drupal

Войдя в админ-панель сайта. Если не помните, как прочитайте статью «вход в панель управления» В верхнем административном меню кликнете по пункту «пользователи» : Далее появиться

Настройка
help2site
Команда DEL

Команда DEL и ERASE позволяют удалять один или несколько файлов в указанном пути. Команда DEL | ERASE удаляют только файлы и не имеют никакого отношения