
Как подключить шрифт Google Fonts локально
Сегодня рассмотрим очень простой способ локального подключения шрифта библиотеки 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. Обратите внимание, что данная рекомендация на показатели производительности сайта напрямую не влияет.
- auto - стратегия загрузки шрифта определяется пользовательским агентом,
- block - для шрифта задается короткий период блокировки и бесконечный период подмены,
- swap - для шрифта не задается период блокировки и задается бесконечный период подмены,
- fallback - для шрифта задается очень короткий период блокировки и короткий период подмены,
- optional - для шрифта задается очень короткий период блокировки и не задается период подмены.
Что ж, для получения нескольких баллов и уважения со стороны 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-кода в файл стилей шаблона вашего сайта вы можете задать время кэширования шрифтов (как локальных статических файлов) и, тем самым, еще немного улучшить показатели производительности вашего сайта.