Отладка проблем с веб-шрифтами
Последние пару часов я пытался понять, почему я не могу заставить определенные веб-шрифты корректно загружаться на моем сайте.
Google Fonts
Я использую .WOFF2
формат. Рассматриваются два шрифта: Exo 2 для заголовков и Open Sans для основного текста. Я отлаживал в последних версиях Opera 1
Хром 2
и Firefox 3
; все из которых поддерживают .WOFF2
формат, но ни один из них не загружает шрифты. Я думаю, что где-то есть ошибка в моем CSS. Дело в том, что я сравнил его с предоставленным Google кодом, и, похоже, он совпадает. Для записи, Opera - мой родной браузер по умолчанию, и тот, который я использую, чтобы напечатать этот вопрос.
На моем сервере файлы шрифтов, полученные из Google Fonts, хранятся в папке ресурсов моего скрипта. Они были переименованы в более удобное для разработчиков имя (я не уверен, что это вызывает у меня проблемы?).
(Google Fonts)
https://cpugrade.com/a/s/exo-2-regular.woff2
https://cpugrade.com/a/s/open-sans-regular.woff2
Вот CSS, который я пробовал для Google Fonts 4
:
@font-face {
font-family: "Exo 2";
font-style: normal;
font-weight: 400;
src: local('Exo 2'), local('Exo2-Regular'), url('exo-2-regular.woff2') format('woff2');
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url('open-sans-regular.woff2') format('woff2');
}
body {
font-family: "Open Sans", "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
}
body #content .section h1,
body #content .section h2 {
font-family: "Exo 2", Ubuntu, "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
}
Шрифт Белка
Кроме того, во время отладки я решил попробовать другой формат, поэтому я пошел в Font Squirrel и скачал .WOFF
формат. Я не переименовал файл шрифта, загрузил его прямо на свой сервер и скопировал предоставленный код CSS. Интересно, что это действительно сработало. Я чувствую, что должен отметить, что я не пробовал оба метода Exo 2 одновременно.
(Font Squirrel)
https://cpugrade.com/a/s/Exo2-Regular-webfont.woff
Наконец, вот CSS из Font Squirrel:
@font-face {
font-family: "exo_2regular";
font-style: normal;
font-weight: 400;
src: url('Exo2-Regular-webfont.woff') format('woff');
}
body #content .section h1,
body #content .section h2 {
font-family: "exo_2regular", Ubuntu, "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
}
Любая помощь будет принята с благодарностью. Спасибо!
Заметки
- Оперная версия
46.0.2597.57 (PGO)
, - Версия Chrome
60.0.3112.90 (Official Build) (64-bit)
, - Версия Firefox
54.0.1 (64-bit)
, - Я могу подтвердить, что с помощью
@import
Метод от Google Fonts работает, однако я бы предпочел разместить его локально.