Как производительно подключать веб-шрифты через CSS?

Question

Accepted Answer

## Главные рычаги

1. **`font-display`**: `swap` (быстрый текст, возможен FOUT) или `optional` (меньше layout thrash на медленной сети).
2. **Preload** критичного `.woff2` + `crossorigin`.
3. **Подмножество** (subset) и 1–2 начертания вместо всей семьи.
4. Метрики: `size-adjust` / `ascent-override` для сближения fallback и webfont (меньше CLS).

```css
@font-face {
  font-family: "InterVar";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0000-00FF;
}
```

## Чего избегать

Блокирующий FOIT без `font-display`, десятки файлов, скачивание с CDP без self-host при жёстком perf-бюджете, поздний `@import` шрифтов в CSS.

## Итог

Мало файлов, woff2, `font-display`, preload критичного, метрики fallback — базовый production-чеклист шрифтов.