Как правильно подключить шрифт от 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 позволяют удалять как каталоги, так и

Web-Дизайн
help2site
Табы с помощью CSS3

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

Ремонт
help2site
Ремонт айпада 3

Ipad 3 — это одно из новых поколение гаджетов от популярной компании Apple. Конечно же он отличается от Ipad 2 , но не на много!

Windows
help2site
Форматирование раздела компьютера, быстрое и обычное, чем различается

Многие пользователи компьютера, путают два понятие, это форматирование и дефрагментация, эти понятия кардинально отличаются друг от друга. Дефрагментация это компоновка фрагментов файлов, для более быстрого

iOS
help2site
Installous для айпад обзор

Installous поможет вам установить взломанные программы из appStore бесплатно. Я думаю не каждый захочет устанавливать взломанные игры или приложения на свой Айпад , безусловно выбор только за вами. Установка

Windows
help2site
Explorer.EXE — как исправить ошибку?

Оглавление Проблемы с приложением Explorer.exe при работе в Windows: причины и решения. В компьютерной практике нередко приходится сталкиваться с очевидными, но весьма невероятными проблемами, точнее

Программы
help2site
10 программ-приколов

Этот пост публикуется в связи с приближающимся 1 апреля. Как известно, это день розыгрышей и различных приколов. Так почему бы не разыграть друга, коллегу или