Next.js: Оптимизация шрифтов — как это работает на практике

next/font скачивает шрифты на этапе сборки и self-host'ит их — в runtime нет запросов к Google. Плюс генерирует fallback с size-adjust, чтобы при swap не было CLS.

Разбор

Два входа:

• next/font/google — любой Google Font по имени; на билде скачивается и кладётся в ваш origin.
• next/font/local — .woff2 из репозитория для кастомных/лицензированных шрифтов.

CLS-killer: size-adjust fallback. При Inter({...}) Next читает метрики шрифта (ascent, descent, x-height, средняя ширина символа) и эмитит @font-face для локального fallback (например Arial) с size-adjust, ascent-override, descent-override — fallback занимает то же место, что и Inter. При подмене web font глифы не сдвигаются → нет reflow.

display: 'swap' (по умолчанию) — сразу fallback, потом swap; без FOIT. Вместе с metric override swap почти незаметен.

Subsetting — только нужные глифы: subsets: ['latin'] отрезает кириллицу/греческий — часто минус больше половины размера файла.

Preload — Next эмитит <link rel="preload"> для self-hosted файла с высоким приоритетом.

Variable fonts предпочтительны — один файл на все веса; для non-variable нужен weight: ['400','700'].

Всё через сгенерированный className или CSS variable — без глобальной утечки, совместимо с Tailwind.

Итог

next/font превращает шрифты в статические ассеты с метрически выровненным fallback — zero third-party запросов и минимальный font-driven CLS.