Убедитесь, что текст остается видимым во время загрузки веб-шрифта.

Шрифты часто представляют собой большие файлы с медленной загрузкой. Некоторые браузеры скрывают текст до тех пор, пока шрифт не загрузится, вызывая вспышку невидимого текста (FOIT) .

Почему аудит отображения шрифтов Lighthouse терпит неудачу

Lighthouse помечает любые URL-адреса шрифтов, которые могут отображать невидимый текст:

Скриншот Lighthouse. Убедитесь, что текст остается видимым во время аудита загрузки веб-шрифтов.

Как избежать отображения невидимого текста

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

  • swap
  • optional
  • fallback

Пример CSS 

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Пример Google-шрифтов

Добавьте параметр &display=swap / &display=optional / &display=fallback в конец URL-адреса Google Fonts: 

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Как избежать сдвигов макета, вызванных отложенными шрифтами

Временное отображение системного шрифта заменит FOIT миганием нестилизованного текста (FOUT). Это улучшает FCP и LCP за счет более быстрого рендеринга контента, но FOIT и FOUT будут иметь одинаковое влияние на CLS, когда пользовательский шрифт заменяет временный системный шрифт.

Влияние CLS на загрузку шрифтов можно смягчить, используя предварительную загрузку в сочетании с font-display: optional . Однако чрезмерное использование предварительных загрузок может негативно повлиять на показатели нагрузки. Мы рекомендуем провести A/B-тестирование, чтобы убедиться, что предварительная загрузка шрифтов не приводит к снижению производительности.

Рекомендации для конкретного стека

Друпал

Укажите @font-display при определении пользовательских шрифтов в вашей теме.

Магенто

Укажите @font-display при определении пользовательских шрифтов .

Ресурсы