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

Опубликовано: 13.12.2019, 22:45. Категория: Верстка и CSS

Сегодня рассмотрим очень простой способ локального подключения шрифта библиотеки Google Fonts на примере Open Sans с помощью сервиса Google Webfonts Helper.

В настоящее время многие сайты используют шрифты библиотеки Google Fonts, которые подключаются одним из двух способов - путем размещения ссылки непосредственно в шапке шаблона сайта:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap&subset=cyrillic" rel="stylesheet">

или с помощью правила @import в файле стилей шаблона сайта:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap&subset=cyrillic');

При использовании любого из данных способов существуют определенные недостатки:

• Зависимость скорости загрузки сайта от доступности серверов Google Fonts,
• Определенное количество http-запросов к серверам Google Fonts и, как следствие, небольшая "задержка" загрузки сайта,
• Невозможность компрессии файла стилей Google Fonts и кэширования шрифтов (как локальных статических файлов).

Сервис Google Webfonts Helper

Шрифты библиотеки Google Fonts можно подключить локально с помощью сервиса Google Webfonts Helper. Для примера рассмотрим процесс локального подключения шрифта Open Sans.

• На странице Google Webfonts Helper в окне поиска введите Open Sans и выберите шрифт из выпадающего списка.
• На странице шрифта выберите тип кодировки cyrillic (для русскоязычных сайтов) и latin (по умолчанию), а также насыщенность и начертание шрифта (скриншот #1).
• Перед копированием стилей (скриншот #2) проверьте корректность пути к каталогу со шрифтами относительно файла стилей шаблона вашего сайта и, если необходимо, внесите изменения в поле Customize folder prefix (скриншот #3).
• Скачайте файл, распакуйте и разместите шрифты в соответствующем каталоге вашего сайта.

Свойство font-display: swap

В отчете Google после проверки сайта в сервисе PageSpeed Insights настоятельно рекомендуется настроить отображение всего текста во время загрузки веб-шрифтов с помощью свойства font-display: swap. Обратите внимание, что данная рекомендация на показатели производительности сайта напрямую не влияет.

Что ж, для получения нескольких баллов и уважения со стороны Google, добавьте свойство font-display: swap во все правила @font-face. Таким образом, окончательная версия CSS-кода должна выглядеть примерно следующим образом:

/* open-sans-300 - cyrillic_latin */
@font-face {
font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v17-cyrillic_latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
	url('../fonts/open-sans-v17-cyrillic_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/open-sans-v17-cyrillic_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
	url('../fonts/open-sans-v17-cyrillic_latin-300.woff') format('woff'), /* Modern Browsers */
	url('../fonts/open-sans-v17-cyrillic_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
	url('../fonts/open-sans-v17-cyrillic_latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* open-sans-regular - cyrillic_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v17-cyrillic_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
	url('../fonts/open-sans-v17-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/open-sans-v17-cyrillic_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
	url('../fonts/open-sans-v17-cyrillic_latin-regular.woff') format('woff'), /* Modern Browsers */
	url('../fonts/open-sans-v17-cyrillic_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
	url('../fonts/open-sans-v17-cyrillic_latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* open-sans-600 - cyrillic_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v17-cyrillic_latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
	url('../fonts/open-sans-v17-cyrillic_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/open-sans-v17-cyrillic_latin-600.woff2') format('woff2'), /* Super Modern Browsers */
	url('../fonts/open-sans-v17-cyrillic_latin-600.woff') format('woff'), /* Modern Browsers */
	url('../fonts/open-sans-v17-cyrillic_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
	url('../fonts/open-sans-v17-cyrillic_latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
  font-display: swap;
}

После компрессии (например, с помощью сервиса CSS Compressor) и вставки CSS-кода в файл стилей шаблона вашего сайта вы можете задать время кэширования шрифтов (как локальных статических файлов) и, тем самым, еще немного улучшить показатели производительности вашего сайта.

500 символов осталось

---

Подписаться на обновления комментариев

Отправить Очистить Отмена