Используйте CSS-дескриптор font-display

Во время проверки быстродействия сайта в PageSpeed Insights можно увидеть такое предупреждение: Настройте показ всего текста во время загрузки веб-шрифтов. Сервис рекомендует использовать CSS-дескриптор font-display, чтобы пользователи могли видеть текст, пока загружаются веб-шрифты.

Но как использовать CSS-дескриптор font-display и выполнить такую настройку? Для этого нужно добавить его в CSS-правило для подключения шрифта и задать значение «swap» для параметра font-display. Это позволит браузеру сначала отобразить текст шрифтом по умолчанию, а затем заменить его загруженным шрифтом.

Чтобы пользователи могли видеть текст, пока загружаются веб-шрифты, подойдёт вот такой код:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff');
font-display: swap;
}

Кроме того, для каждого элемента, для которого задаётся семейство шрифтов, надо указать также безопасные шрифты. Например, для Roboto добавить Arial, sans-serif, а для Merriweather — Georgia, serif.

h1 {
font-family: Merriweather, Georgia, serif;
}
p {
font-family: Roboto, Arial, sans-serif;
}

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

А как проверить, что font-display работает на сайте? В данном случае можно воспользоваться инструментами разработчика в браузере. Действия могут быть такими:

• Откройте веб-страницу с подключенными шрифтами.
• Откройте инструменты разработчика в браузере (обычно это можно сделать нажатием клавиши F12).
• Перейдите на вкладку «Network» (Сеть).
• Обновите страницу (например, нажмите клавишу F5).
• Найдите запросы к файлам шрифтов на странице. Они будут иметь расширение .woff, .woff2, .ttf или .otf.
• Выберите один из запросов к шрифту и откройте его.
• Найдите заголовок Response Headers (Заголовки ответа) и проверьте, есть ли там строка font-display. Если строка есть, значит font-display работает на вашем сайте.
• Например, если вы используете Google Fonts и хотите проверить, работает ли font-display, то запросы к шрифтам будут иметь URL-адрес вида https://fonts.gstatic.com/s/…. Выберите один из таких запросов и проверьте заголовки ответа на наличие font-display.

Какие браузеры поддерживают CSS-дескриптор font-display? Этот дескриптор поддерживается следующими браузерами:

• Google Chrome: начиная с версии 60.
• Mozilla Firefox: начиная с версии 58.
• Safari: начиная с версии 11.1.
• Microsoft Edge: начиная с версии 17.
• Opera: начиная с версии 47.

Важно отметить, что Internet Explorer не поддерживает CSS-дескриптор font-display. Если вы хотите использовать этот дескриптор, необходимо убедиться, что ваша аудитория использует поддерживаемые браузеры.

Всем WEB!