Отладка проблем с веб-шрифтами

Последние пару часов я пытался понять, почему я не могу заставить определенные веб-шрифты корректно загружаться на моем сайте.

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;
}

Любая помощь будет принята с благодарностью. Спасибо!

Заметки

  1. Оперная версия 46.0.2597.57 (PGO),
  2. Версия Chrome 60.0.3112.90 (Official Build) (64-bit),
  3. Версия Firefox 54.0.1 (64-bit),
  4. Я могу подтвердить, что с помощью @import Метод от Google Fonts работает, однако я бы предпочел разместить его локально.

0 ответов

Другие вопросы по тегам