Какие плюсы и минусы загрузки нужного шрифта после отображения другого шрифта

«Какие плюсы и минусы загрузки нужного шрифта после отображения другого шрифта» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Плюсы:

  • Уменьшает время до первого отображения текста (FCP), так как браузер сразу показывает fallback-шрифт
  • Может улучшить производительность, если основной шрифт тяжелый
  • Позволяет избежать "невидимого текста" (FOIT) при медленной загрузке

Минусы:

  • Может вызвать "скачок" текста (FOUT) при замене шрифта
  • Ухудшает UX из-за визуального переключения стилей
  • Требует дополнительной настройки font-display и fallback-шрифтов

Пример с font-display:

@font-face {
  font-family: 'Custom';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* fallback → swap → optional */
}

Лучше использовать font-display: optional для критически важного текста или swap для декоративных элементов.