Какая проблема возникнет при загрузке кастомного шрифта без font-display?

Проблема скрытого текста (FOIT) и влияние на производительность

При загрузке кастомного шрифта без явного указания свойства font-display возникает критическая проблема, известная как FOIT (Flash of Invisible Text) — мгновенное исчезновение текста. Это происходит из-за поведения браузера по умолчанию, которое регулируется алгоритмом загрузки шрифтов.

Механизм работы браузера без font-display

Когда браузер встречает в CSS правило @font-face без font-display, он применяет стратегию загрузки по умолчанию, которая варьируется между браузерами, но чаще всего соответствует значению auto. На практике это приводит к следующей последовательности событий:

/* Проблемный пример без font-display */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  /* font-display отсутствует — будет использовано значение по умолчанию */
}

<!-- Текст будет невидим до загрузки шрифта -->
<p style="font-family: 'CustomFont', sans-serif;">Важный контент</p>

1. Блокировка отображения текста (0-3 секунды): Браузер скрывает текст, используя резервный шрифт, ожидая загрузки кастомного шрифта
2. Тайм-аут и переход на резервный шрифт: Если шрифт не загрузился за время тайм-аута (обычно 3 секунды), текст отображается резервным шрифтом
3. Смена шрифта после загрузки: Когда кастомный шрифт всё же загружается, происходит повторная отрисовка текста (FOUT — Flash of Unstyled Text)

Основные негативные последствия

Для пользовательского опыта:

• Длительные периоды невидимого текста (особенно на медленных соединениях)
• Раздражающие визуальные "вспышки" при смене шрифтов
• Возможная CLS (Cumulative Layout Shift) — смещение макета при замене шрифта
• Ухудшение восприятия контента и возможное увеличение отказов

Для производительности и метрик:

• Увеличение LCP (Largest Contentful Paint) — если крупнейшим элементом является текст
• Ухудшение FID (First Input Delay) из-за блокировки рендеринга
• Негативное влияние на SEO, так поисковые системы учитывают скорость загрузки

Решение через font-display

Свойство font-display позволяет контролировать стратегию загрузки шрифтов:

/* Рекомендуемое решение */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* Ключевое значение для оптимального UX */
}

Доступные значения и их влияние:

• swap: Немедленно показывает текст резервным шрифтом, заменяет на кастомный после загрузки
• block: Краткая блокировка (обычно ~100мс), затем резервный шрифт до загрузки основного
• fallback: Очень краткая блокировка (~100мс), если шрифт не загрузился за 3 секунды — используется резервный навсегда
• optional: Краткая блокировка, решение об использовании шрифта принимается на основе скорости соединения

Практические рекомендации

Оптимальная стратегия для большинства случаев:

@font-face {
  font-family: 'PrimaryFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: 'PrimaryFont';
  src: url('font-bold.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
}

Дополнительные оптимизации:

1. Предзагрузка критических шрифтов:

<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>

1. Локальное хранение через Service Worker:

// Кэширование шрифтов для повторных посещений
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('fonts-cache').then(cache => {
      return cache.addAll(['/fonts/custom-font.woff2']);
    })
  );
});

1. Использование переменных шрифтов для уменьшения количества HTTP-запросов

Вывод

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