Отсутствует заголовок ответа Cross-Origin Resource Sharing (CORS)
Браузеры:
- Фаерфокс (3.5+)
- Интернет Эксплорер (9+)
- Хром (37+)
Обзор
Chrome, Firefox и более новые версии Internet Explorer применяют стандарт совместного использования ресурсов Cross-Origin и, таким образом, отображают только веб-шрифты, обслуживаемые с соответствующим заголовком ответа «Access-Control-Allow-Origin». Поскольку Google Fonts можно просматривать в любом домене, шрифты подаются со следующим заголовком ответа:
Access-Control-Allow-Origin:*
Возможная причина
Некоторые прокси могут удалить заголовок из ответа, после чего браузер не будет отображать шрифты.
Диагностика
В Chrome проверьте наличие соответствующего предупреждающего сообщения в консоли DevTools .
В Firefox можно использовать расширения Firebug или Live HTTP Headers для просмотра заголовков ответов и подтверждения наличия заголовка ответа CORS.
Ссылки
Веб-шрифты не отображаются в Firefox, когда установлен плагин NoScript.
Браузеры: * Firefox (3.5+)
Обзор
Firefox не отображает веб-шрифты, если установлен плагин NoScript.
Возможная причина
По умолчанию плагин NoScript отключает правила @font-face.
Решение
Откройте параметры NoScript, перейдите на вкладку «Внедрения» и снимите флажок: «Запретить @font-face».
Веб-шрифты не отображаются
Браузеры: * Все
Обзор
Используемые веб-шрифты не отображаются.
Возможная причина
В URL-адресе API ошибка или запрошен стиль, не поддерживаемый шрифтом.
Решение
Убедитесь, что URL-адрес отформатирован правильно, что в названии шрифта соблюдается регистр (например, Droid Serif, а не droid serif), что соблюдается синтаксис толщины и стилей, а также синтаксис для загрузки нескольких семейств (см. документация: Начало работы — Синтаксис . Если шрифты не отображаются, просмотр содержимого таблицы стилей может дать дополнительную информацию о том, что происходит не так. Скопируйте и вставьте URL-адрес в свой браузер и убедитесь, что вы не видите сообщения об ошибке. Например, при запросе веса, не поддерживаемого Droid Serif, появится следующее сообщение об ошибке:
/* Droid Serif (style: normal, weight: 300) is not available */ /* However, style: normal, weight: normal is available */ /* However, style: italic, weight: normal is available */ /* However, style: normal, weight: bold is available */ /* However, style: italic, weight: bold is available */ /* Not supported. */
Веб-шрифты выглядят толще при использовании в заголовке.
Браузеры: * Все
Обзор
Шрифты выглядят толще при использовании в заголовках (h1, h2 и т. д.), хотя шрифт имеет нормальную толщину (400).
Возможная причина
Браузер автоматически выделил текст жирным шрифтом.
Решение
Убедитесь, что в вашем правиле CSS указана правильная толщина шрифта при применении шрифта к заголовку:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}