Почему веб-шрифт не загружается: проверка формата и MIME-типа на сайте

Если веб-шрифт не загружается, сначала проверьте три вещи: существует ли файл по указанному адресу, поддерживает ли браузер его формат и отправляет ли сервер правильный MIME-тип. Затем проверьте CORS, путь в CSS и отсутствие блокировки в панели разработчика. Такой порядок быстро отделяет ошибку файла от ошибки конфигурации сайта.

Дата актуальности материала: 28 августа 2026 года. Инструкция подходит для сайтов на обычном веб-сервере, CDN, популярных CMS и современных сборщиков фронтенда.

Веб-шрифт подключают правилом @font-face. В нём указывают семейство, начертание, вес и адрес файла в свойстве src. Когда браузер встречает текст с таким семейством, он запрашивает файл по указанному URL, проверяет ответ сервера и пытается распознать содержимое. Ошибка на любом этапе приводит к замене шрифта системным или резервным.

Например, CSS может содержать семейство Font Example, вес 400 и файл /fonts/example-regular.woff2. Если путь ведёт к странице 404, сервер отвечает HTML вместо шрифта или заголовок Content-Type не соответствует файлу, браузер не сможет применить начертание, даже если правило CSS написано без синтаксических ошибок.

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

Для веба чаще всего используют WOFF2, а при необходимости совместимости добавляют WOFF. WOFF2 обычно предпочтителен благодаря более эффективному сжатию. Форматы TTF и OTF могут использоваться как исходные файлы или запасной вариант, но для публикации в интернете их применяют осторожнее: они часто тяжелее и не всегда являются оптимальным выбором для доставки в браузер.

Файл WOFF2 имеет расширение .woff2 и обычно указывается первым в списке src. Современные браузеры поддерживают этот формат, поэтому для большинства новых сайтов достаточно подготовить корректный WOFF2-файл. Проверьте, что расширение соответствует реальному содержимому: простое переименование TTF в WOFF2 не конвертирует шрифт и не исправит структуру файла.

WOFF с расширением .woff может использоваться как резервный источник после WOFF2. Браузер выбирает подходящий формат из списка, если CSS оформлен корректно. Наличие двух расширений само по себе не решает проблему: каждый файл должен существовать, иметь правильный Content-Type и быть доступным по указанному пути.

TTF и OTF — распространённые форматы шрифтов, но их не следует автоматически считать веб-форматами. Если сайт отдаёт такой файл, проверьте поддержку конкретного браузера, размер ресурса и MIME-тип. Для стабильной веб-доставки лучше использовать специально подготовленный WOFF2, а исходный TTF оставить для редактирования или установки в операционной системе.

MIME-тип, или Content-Type, сообщает браузеру, какой вид данных вернул сервер. Для WOFF2 обычно используют application font woff2, записанный без пробела как application/font-woff2. Для WOFF применяется font/woff, для TTF — font/ttf, для OTF — font/otf. Конкретная конфигурация зависит от сервера, но заголовок должен соответствовать реальному формату файла.

Ошибочный MIME-тип возникает, например, когда сервер отдаёт файл шрифта как text/html, потому что URL попал на страницу ошибки. Другая ситуация — универсальная настройка application/octet-stream. Такой ответ иногда позволяет скачать файл, но не всегда корректно проходит проверку браузером и инструментов безопасности. Надёжнее настроить отдельные типы для расширений шрифтов.

Диагностику удобнее проводить в инструментах разработчика. Не ограничивайтесь просмотром страницы: браузер может показывать текст, но незаметно использовать резервный шрифт. Нужно проверить сам сетевой запрос, его статус, заголовки и содержимое ответа.

В CSS указан путь /assets/fonts/site.woff2, но после сборки файл оказался в /assets/site.woff2. Браузер делает запрос по старому адресу, получает 404 и не применяет шрифт. Исправьте путь в CSS или настройку сборщика, очистите кэш и повторите проверку в Network. Если ответ имеет Content-Type text/html, это дополнительный признак страницы ошибки.

Переименование файла site.ttf в site.woff2 не является конвертацией. Расширение сообщает имя, но не меняет внутреннюю структуру. Браузер пытается разобрать данные как WOFF2, обнаруживает несовместимое содержимое и выдаёт ошибку декодирования. Используйте настоящий экспорт или конвертацию в WOFF2 из корректного исходного файла с учётом лицензии на шрифт.

Если CSS загружается с example.ru, а шрифт находится на static.example.ru или внешнем CDN, браузер применяет правила междоменного доступа. Сервер, который отдаёт файл, должен разрешить запросы от нужного источника с помощью заголовка Access-Control-Allow-Origin. Настройка должна быть согласована с политикой сайта: не открывайте ресурс шире, чем требуется проекту.

Когда страница работает по HTTPS, а файл шрифта запрашивается по HTTP, браузер может заблокировать такой mixed content. Исправьте абсолютный адрес на HTTPS или используйте относительный путь, если ресурс находится на том же сайте. Проверьте также перенаправления: переход с HTTPS на HTTP создаёт похожую проблему.

Даже правильный файл не заработает, если CSS неверно связывает его с текстом. Укажите одинаковое имя в font-family внутри @font-face и в стилях элемента. Для каждого веса создайте отдельное правило или корректно опишите диапазон variable font. Свойства font-style и font-weight должны соответствовать реальному начертанию, иначе браузер может синтезировать жирность или выбрать другой файл.

Проверьте порядок источников и форматные подсказки. Если сначала указан недоступный ресурс, браузер может перейти к следующему варианту, но ошибка всё равно останется в журнале. Убедитесь, что URL не содержит лишнего регистра: на части серверов путь Font.woff2 и font.woff2 указывает на разные файлы.

Само наличие файла не гарантирует успешную загрузку. Проверьте точный URL, регистр символов, статус ответа, Content-Type, CORS и реальное содержимое файла. Если сервер возвращает HTML, повреждённый ресурс или неподходящий тип данных, браузер отклонит шрифт несмотря на правильное расширение .woff2.

Для WOFF2 обычно используют MIME-тип application/font-woff2. Он должен отправляться в заголовке Content-Type при запросе файла. Проверьте заголовок в панели Network, потому что настройка расширения на сервере может отсутствовать, работать только для другого каталога или перекрываться правилами CDN.

TTF можно подключать в проектах, где это оправдано поддержкой конкретной среды, но для современной веб-доставки обычно выбирают WOFF2. Он предназначен для компактной передачи шрифтов через сеть. При использовании TTF проверьте поддержку браузеров, размер файла, корректный MIME-тип и лицензионные условия.

Локальная среда может обращаться к файлу напрямую, а хостинг меняет пути, регистр имён, заголовки или правила доступа. После публикации проверьте итоговую папку сборки и фактический ответ сервера. Частые причины — неправильный относительный путь, отсутствие файла в деплое, MIME-тип по умолчанию и блокировка CORS.

Не всегда. Если проект рассчитан на современные браузеры, корректного WOFF2 может быть достаточно. WOFF добавляют как запасной вариант, когда нужно поддержать более старые окружения или особую инфраструктуру. Каждый дополнительный файл увеличивает сложность настройки, поэтому его следует включать только при понятной потребности.

Настройте сервер, CDN или объектное хранилище так, чтобы оно разрешало запрос шрифта с домена страницы. Проверьте Access-Control-Allow-Origin и другие правила, влияющие на кросс-доменные запросы. Не заменяйте исправление CORS отключением защиты в браузере: такой обход помогает только локально и не решает проблему для посетителей сайта.

У каждого начертания может быть отдельный файл и отдельная ошибка. Проверьте путь к bold-файлу, значение font-weight, MIME-тип, статус ответа и соответствие фактического содержимого. Если файл bold отсутствует, браузер иногда синтезирует жирность из regular, поэтому визуальная разница может маскировать проблему.

Когда веб-шрифт не загружается, начинайте с Network: статус запроса, Content-Type, адрес файла и текст ошибки обычно сразу показывают причину. После этого проверьте CORS, HTTPS и связь между @font-face и нужным начертанием. Для нового проекта используйте корректно подготовленный WOFF2 и тестируйте опубликованную версию сайта, а не только локальную сборку.

Нужен собственный шрифт для сайта, бренда или интерфейса? Создайте и подготовьте шрифт на fontgenerator.ru, а затем проверьте его веб-версию по этому чеклисту перед публикацией.