Если вместо заданного шрифта браузер показывает системный (Arial, Times New Roman и т.п.), причина почти всегда одна из четырёх: файл шрифта не загрузился, путь к нему прописан неверно, сработала блокировка CORS или сработал кэш браузера/CDN со старой версией CSS.
Как понять, что именно сломалось
Откройте страницу, нажмите F12 и перейдите на вкладку «Сеть» (Network), обновите страницу и отфильтруйте запросы по типу Font. Если файлы .woff2, .woff или .ttf отсутствуют в списке — браузер их даже не запрашивал, значит проблема в CSS. Если запрос есть, но статус красный (404, 403 или ошибка CORS) — проблема на стороне сервера или путей.
- 404 — неверный путь к файлу шрифта в @font-face или файл удалён/не загружен на хостинг
- 403 — сервер запрещает доступ к папке со шрифтами (проверьте .htaccess или настройки хостинга)
- CORS error — шрифт подключается с другого домена/поддомена без корректных заголовков Access-Control-Allow-Origin
- Файл загружается, но текст всё равно системным шрифтом — ошибка в имени font-family или в порядке форматов src
Проверка правила @font-face
Убедитесь, что правило подключения написано корректно и указывает на реально существующие файлы:
@font-face {
font-family: ‘MyFont’;
src: url(‘/fonts/myfont.woff2’) format(‘woff2’),
url(‘/fonts/myfont.woff’) format(‘woff’);
font-display: swap;
}
Название в font-family должно совпадать с тем, что используется в остальном CSS (регистр и кавычки не важны, но опечатки — критичны). Путь в url() указывайте от корня сайта или относительно самого CSS-файла — частая ошибка, когда файл стилей лежит в подпапке и относительный путь «уезжает».
Что делать, если шрифт подключён через CDN или сторонний хостинг
Если шрифты грузятся с другого домена (например, из отдельного поддомена статики), браузер требует правильных CORS-заголовков. На сервере, где лежат файлы шрифтов, добавьте:
Access-Control-Allow-Origin: *
или конкретный домен вместо звёздочки. Без этого заголовка Chrome и Firefox молча откажутся использовать шрифт, даже если файл успешно скачался — в консоли будет предупреждение вида «Access to font at … has been blocked by CORS policy».
Проблема пропала после правок, но браузер всё равно показывает старое
Кэш — самая частая причина «я всё исправил, а не помогло». Сделайте жёсткое обновление (Ctrl+F5 или Ctrl+Shift+R), проверьте в приватном окне и очистите кэш на стороне CDN, если он используется. Если сайт на WordPress с плагином кэширования, дополнительно сбросьте кэш через админку плагина — иначе браузер продолжит подгружать старую версию CSS с неверным путём.
Что проверить, если ничего из этого не помогло
- Формат файла шрифта — современным браузерам достаточно woff2, но для старых нужен fallback woff/ttf
- Лицензия шрифта — некоторые платные шрифты запрещают self-hosting и требуют подключения через API поставщика
- Расширения браузера (блокировщики рекламы иногда режут запросы к сторонним доменам со шрифтами)
- Права доступа к файлам на сервере — папка со шрифтами должна быть читаема (обычно 644 для файлов, 755 для папок)