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

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

# Причины плохих результатов проверки отображения шрифтов в Lighthouse

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

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

Самый простой способ избежать отображения невидимого текста при загрузке пользовательских шрифтов — это временно отобразить системный шрифт. Включив font-display: swap в свой @font-face, вы можете избежать FOIT в большинстве современных браузеров:

@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;
}

API font-display определяет способ отображения шрифта. swap сообщает браузеру, что текст, использующий шрифт, должен немедленно отображаться с использованием системного шрифта. Когда пользовательский шрифт готов, он заменяет системный шрифт. (Для получения дополнительной информации см. статью «Избегайте невидимого текста во время загрузки шрифта».)

# Предварительно загрузите веб-шрифты

Используйте <link rel="preload" as="font">, чтобы получить файлы шрифтов раньше. Дополнительные материалы:

• Предварительная загрузка веб-шрифтов для повышения скорости загрузки (codelab).
• Предотвращение смещения макета и мигания невидимого текста (FOIT) путем предварительной загрузки дополнительных шрифтов.

# Шрифты Google

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

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

# Поддержка браузера

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

# Рекомендации по стекам

# Drupal

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

# Magento

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

# Ресурсы

• Исходный код проверки Ensure text remains visible during webfont (Убедитесь, что текст остается видимым во время загрузки веб-шрифтов).
• Избегайте невидимого текста во время загрузки шрифта.
• Управление производительностью шрифтов с помощью отображения шрифтов.
• Предварительная загрузка веб-шрифтов для повышения скорости загрузки (codelab).
• Предотвращение смещения макета и мигания невидимого текста (FOIT) путем предварительной загрузки дополнительных шрифтов.