Как исправить корявый шрифт при подключении через @font-face

Если после подключения веб-шрифта с помощью правила @font-face текст отображается «коряво» - с зазубринами, неправильными пропорциями или вообще не тем шрифтом, это указывает на типовую ошибку в CSS или загрузке файлов. Разберём основные причины и способы решения.

Почему шрифт отображается некорректно?

Причина «корявого» отображения обычно кроется в одном из трёх факторов: неверный путь к файлу шрифта, неправильное указание font-weight или font-style, либо использование неподдерживаемого формата. Браузер может подхватить системный шрифт, если не найдёт ваш, что визуально выглядит как «сломанный» дизайн.

Проверка пути к файлам шрифта

Убедитесь, что ссылки в src ведут к реально существующим файлам. Ошибка в пути - самая частая причина. В вашем примере путь ../fonts/avanti.woff2 предполагает, что папка fonts находится на уровень выше относительно CSS-файла. Откройте вкладку «Сеть» (Network) в инструментах разработчика браузера (F12) и проверьте, загружаются ли файлы со статусом 200. Если видите 404 - исправляйте путь.

Правильное указание font-weight

Часто «корявость» возникает, когда для шрифта указан font-weight: 400, а в CSS элемента используется font-weight: 700 (жирный). Если у вас нет отдельного файла для жирного начертания, браузер попытается искусственно «утолщить» шрифт, что приводит к искажениям. Рекомендуется подключать каждое начертание отдельно:

@font-face {
  font-family: avanti;
  font-display: swap;
  src: url('../fonts/avanti-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: avanti;
  font-display: swap;
  src: url('../fonts/avanti-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

Как диагностировать ошибку в @font-face?

Используйте панель «Консоль» (Console) в инструментах разработчика. Если шрифт не загрузился, вы увидите сообщение вида: «Failed to decode downloaded font» или «OTS parsing error». Это может означать, что файл повреждён, либо вы используете неподдерживаемый формат. Современные браузеры отлично работают с woff2, но для старых версий Internet Explorer может потребоваться eot.

Порядок объявления форматов

Рекомендуется первым указывать woff2 (самый сжатый), затем woff, и, при необходимости, ttf или eot. Это ускоряет загрузку на современных браузерах. Пример:

src: url('../fonts/avanti.woff2') format('woff2'),
     url('../fonts/avanti.woff') format('woff'),
     url('../fonts/avanti.ttf') format('truetype');

Дополнительные советы по устранению проблем

• Кеширование браузера: После изменения путей или настроек очистите кеш (Ctrl+F5) или выполните жёсткую перезагрузку.
• Кросс-доменные запросы: Если шрифты лежат на другом домене, настройте CORS на сервере, добавив заголовок Access-Control-Allow-Origin: *.
• Свойство font-display: Используйте font-display: swap, чтобы текст отображался системным шрифтом до загрузки вашего - это предотвратит «моргание» текста (FOUT).

После проверки всех перечисленных пунктов перезагрузите страницу. Если шрифт всё ещё «корявый», проверьте сам файл шрифта - возможно, он повреждён или имеет неправильную лицензию. Попробуйте скачать другую версию шрифта или конвертировать его через онлайн-сервис (например, Font Squirrel).