пр. Мира 620000 Россия +7900-000-00-00
Логотип блога интернет-бродяги

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

Используйте 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. Если вы хотите использовать этот дескриптор, необходимо убедиться, что ваша аудитория использует поддерживаемые браузеры.

ytprevyu

Всем WEB!

Друзья, плюсаните, вдруг пригодится!

Почитайте похожие материалы

Об авторе: Hobo

Стараюсь всё делать своими собственными руками: от починки выключателя до создания веб-сайта. В этом блоге делюсь своим опытом и впечатлениями от использования различной техники, электронных и других устройств, которые побывали у меня в руках.

2 Comments

  1. Олег:

    Хорошая тема с этим дескриптором, надо попробовать.

    1. Да, попробуйте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *