Что такое FOIT и FOUT?

Question

Accepted Answer

## Расшифровка

- **FOIT** (Flash of Invisible Text) — текст скрыт, пока не загрузился webfont.
- **FOUT** (Flash of Unstyled Text) — сначала fallback, потом «прыжок» на webfont.

Управляет в основном `font-display`:

```css
@font-face {
  font-family: "Brand";
  src: url(brand.woff2) format("woff2");
  font-display: swap; /* скорее FOUT, текст сразу читаем */
}
```

`optional` может оставить fallback на медленной сети (меньше позднего shift). Метрики `@font-face` снижают визуальный скачок при FOUT.

## Итог

FOIT — невидимый текст; FOUT — смена шрифта. `font-display` и метрики выбирают компромисс UX/CLS.