Почему мои шрифты не загружаются во всех браузерах с использованием @ font-face? - PullRequest
Новая
       14

Почему мои шрифты не загружаются во всех браузерах с использованием @ font-face?

0 голосов
/ 30 января 2019

Я пытаюсь использовать @ font-face для загрузки двух шрифтов, но сталкиваюсь со всевозможными странными проблемами.Некоторые браузеры загружают шрифты, другие нет.Тот же браузер на рабочем столе не загружается, а на мобильном.Я не знаю, есть ли что-то не так с моим кодом или моей файловой структурой или чем-то (я использовал генератор fontsquirrel для шрифта sdregular, но не другой).

Мой код @ font-face: 

@font-face {
    font-family: 'sdregular';
    src: url('sd-regular-webfont.woff') format('woff');
}
@font-face {
    font-family: 'BoereTudor';
    src: url('BOERT___0.ttf') format('truetype');
}

Мой код стилей CSS: 

.c9 {font-family: 'sdregular';}
.c7 {font-family: 'BoereTudor'; font-size: 1.5em;}

Вот ссылка на страницу: https://universaltheosophy.com/hpb/voiceofthesilence.html

Мои таблицы стилей и шрифты находятся в папке https://universaltheosophy.com/resources/

Файл css utfonts.css вызывает шрифты, используя @ font-face.Файл CSS utstyle.css содержит настройку семейства шрифтов для двух классов (.c7 и .c9)

.c7 используется для текста «Посвящен немногим»;и .c9 используется для обозначения, расположенного здесь: https://universaltheosophy.com/hpb/voiceofthesilence.html#sdfootnote41sym

Я пробовал тестировать в Firefox (для настольных компьютеров и мобильных устройств), Chrome (для настольных компьютеров и мобильных устройств) и в мобильном браузере DuckDuckGo с полностьюпротиворечивые результаты.

Любая помощь будет высоко ценится!

1 Ответ

0 голосов
/ 30 января 2019

Хорошо, нашел решение, которое не имело ничего общего с моим кодом.Мой сайт - это сайт WordPress, но я добавляю эти несколько HTML-файлов отдельно от WordPress.Попытка загрузить файлы шрифтов из этих HTML-файлов привела к ошибке «Access-Control-Allow-Origin (CORS origin)».Решение заключается в добавлении этого небольшого фрагмента кода в файл WordPress .htaccess: 

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Решение пришло отсюда: https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/

...