Next.js: Оптимизация шрифтов — ментальная модель

Question

Accepted Answer

`next/font` self-host на build + metric-matched fallback — zero third-party font requests и font-driven CLS. Build-time optimizer, не runtime loader.

## Разбор

Старый путь — `<link>` к Google Fonts: DNS + TLS, render-blocking CSS, layout shift при swap (другие metrics → reflow). В EU — GDPR liability (судебные прецеденты по tracking через font CDN).

`next/font` на **build time**:

```
build: download font → subset → self-host under /_next → compute fallback metrics
runtime: preload the file from YOUR origin, apply size-adjust fallback → no reflow
```

## Что сказать

**`next/font` превращает network-dependent runtime concern в static asset в deploy.** Production — нет запроса к font provider; шрифт — ещё один файл с вашего origin.

## Итог

Self-host + size-adjust fallback = privacy, performance и CLS без ручной `@font-face` матемatics.