Шрифты

Шрифты в React-приложениях подключаются не напрямую в компонентах, а через CSS-файлы с использованием правила @font-face. Это стандартный веб-подход, который корректно интегрируется со сборщиками (Webpack, Vite): при импорте CSS-файла сборщик обнаруживает ссылки на шрифты, копирует их в папку сборки и подставляет правильные пути.

Как подключить шрифт

Поместите файл шрифта в папку проекта, например src/assets/fonts/Inter.woff2.
Создайте CSS-файл (например, src/styles/fonts.css) и опишите шрифт:
```
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
```
Важно: путь в url() должен быть относительным от CSS-файла к файлу шрифта.
Импортируйте CSS в корневой компонент или точку входа:
```
import './styles/fonts.css';
```
Теперь шрифт зарегистрирован, и его можно использовать в любых стилях.

Поддерживаемые форматы

Сборщики по умолчанию обрабатывают:

.woff2 — современный, сжатый формат (рекомендуется как основной),
.woff — более старый, но широко поддерживаемый,
.ttf — TrueType, используется редко из-за большого размера.

Используйте .woff2 как основной формат. Для максимальной совместимости можно указать несколько источников:

@font-face {
  font-family: 'MyFont';
  src: url('../fonts/MyFont.woff2') format('woff2'),
       url('../fonts/MyFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Почему нельзя импортировать шрифт напрямую в JS

В отличие от изображений, шрифты не используются как значения в JSX. Они применяются через CSS, поэтому импорт в JavaScript (import font from './font.woff2') бесполезен — вы получите строку с путём, но не сможете зарегистрировать шрифт в браузере. Единственный корректный способ — через @font-face в CSS.

Шрифты

Как подключить шрифт

Поддерживаемые форматы

Почему нельзя импортировать шрифт напрямую в JS

Рекомендации