Отсутствует заголовок ответа Cross-Origin Resource Sharing (CORS)
Браузеры:
- Фаерфокс (3.5+)
- Internet Explorer (9+)
- Хром (37+)
Обзор
Chrome, Firefox и более новые версии Internet Explorer применяют стандарт совместного использования ресурсов между источниками и, таким образом, отображают только веб-шрифты, которые обслуживаются с соответствующим заголовком ответа «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;
}