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

Без `font-display` браузер по умолчанию (поведение auto, обычно как block) может скрыть текст до загрузки шрифта — пользователь видит пустое место (FOIT, flash of invisible text).

Что происходит

1. Страница отрисована, но текст с кастомным шрифтом невидим.
2. Браузер ждёт шрифт до ~3 секунд.
3. Если шрифт не успел — показывает запасной; если успел — свой.

На медленном соединении это несколько секунд «пустых» заголовков и кнопок.

Решение

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

• `swap` — сразу показывает запасной шрифт, потом подменяет на свой (возможен «скачок» — FOUT).
• `optional` — использует шрифт, только если он загрузился почти мгновенно; без скачков.
• `fallback` — короткое ожидание, потом запасной.

Дополнительно

• <link rel="preload" as="font" type="font/woff2" crossorigin> для главного шрифта;
• подобрать запасной шрифт по метрикам (size-adjust, ascent-override), чтобы уменьшить сдвиг макета (CLS).

Коротко для собеседования

Без font-display текст может быть невидим до загрузки шрифта (FOIT); swap или optional плюс preload и подгонка запасного шрифта решают проблему.

Подробнее: web.dev — font-display