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

Проблемы с подключением шрифтов обычно связаны с неправильными путями, форматами или CORS. Вот основные решения:

1. Проверь пути
   Убедись, что путь к файлу шрифта указан правильно относительно CSS-файла или корня проекта:

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
}

2. Используй современные форматы
   Подключай WOFF2 (оптимальный) и WOFF как fallback:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}

3. CORS для CDN или внешних ресурсов
   Если шрифт загружается с другого домена, убедись, что сервер отправляет правильные CORS-заголовки (Access-Control-Allow-Origin: *).

4. Проверь MIME-типы
   Сервер должен отдавать шрифты с правильными MIME-типами (например, font/woff2).

5. Font-display для контроля загрузки
   Добавь font-display: swap чтобы текст отображался системным шрифтом до загрузки кастомного:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}