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

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

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

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

Команда RD и RMDIR позволяют удалять как каталоги, так и

Оборудование
help2site
Как выбрать мощность блока питания для ПК

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

Web-Дизайн
help2site
Как пишутся скрипты на PHP

Для написания кода на PHP подходит любой текстовый редактор (например Notepad++). Оглавление Размещение PHP на HTML-странице Код скрипта PHP может размещаться непосредственно на HTML-странице. Чтобы

Оборудование
help2site
Влияние блока питания на работу компьютера

Что нужно для стабильной работы компьютера? Хорошая видеокарта, процессор, системная плата, но многие забывают добавить к этому списку качественный и мощный блок питания. Блок питания, как центр электроснабжения

Аndroid
help2site
Google Apps: до и после Material Design

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

Оборудование
help2site
Как узнать какая у меня видеокарта

Оглавление Каждый второй пользователь рано или поздно задается этим вопросом. Как узнать какая у меня видеокарта? Вот верные способы, которые помогут Вам понять какая видеокарта