Как реализовать макет с нестандартными шрифтами?

Question

Accepted Answer

## Способ
Подключить веб-шрифт через `@font-face` или сервис (Google Fonts self-host предпочтительнее для privacy/perf), задать `font-family` со stack’ом fallback.

## Пример

```css
@font-face {
  font-family: "InterVar";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
body {
  font-family: "InterVar", system-ui, sans-serif;
}
```

Следите за CLS (`font-display`, metric-совместимые fallback), подмножествами глифов, переменными шрифтами, лицензиями. Preload критичного `.woff2`.

## Итог
`@font-face` + fallback + `font-display` + контроль сдвига вёрстки. Нестандартный шрифт — это и дизайн, и производительность.