Шрифт Awesome не работает в Firefox и IE

У меня проблема с шрифтом awesome, который включен в сайт wordpress. В Firefox и IE значки вообще не отображаются, однако в Chrome и Safari он отлично работает.

Я нашел "решения", которые говорят, что мне нужен .htaccess с определенным контентом для поддержки этих браузеров, однако, если я использую этот подход, у Safari и Chrome внезапно возникают проблемы, и Firefox и IE все еще не работают.

Есть ли у кого-нибудь новые идеи?

Вот сообщение об ошибке, выведенное журналом ошибок firefox dev при загрузке моего сайта:

Fehler: загружаемый шрифт: загрузка не удалась (font-family: "icomoon" style: normal weight: normal stretch: normal src index: 2): неправильный URI или межсайтовый доступ не разрешен источник: http://mysite.de/wp-content/themes/heat/fonts/icomoon/icomoon.woffQuelldatei: http://mysite.de/wp-content/themes/heat/style.cssZeile: 0 Quelltext: @font-face {font-family: "icomoon"; font-style: normal; font-weight: normal; src: url ( "fonts/icomoon/icomoon.eot? #iefix" ) format ( "embedded-opentype" ), url ( "fonts/icomoon/icomoon.svg # icomoon" ) format ( "svg" ), url ( "fonts/icomoon/icomoon.woff" ) ( "woff" ), url ( "fonts/icomoon/icomoon.ttf" ) format ( "truetype" ); }

Спасибо за помощь!

P.S. Кстати, значки на шрифте удивительного веб-сайта отлично работают в FF.

ОБНОВЛЕНИЕ *

ok после прочтения многих сообщений в форуме по этому вопросу я пришел к следующему выводу: большинство людей сталкиваются с этой проблемой, потому что они загружают свои шрифты с внешнего сервера. добавив код .htaccess, чтобы позволить FF делать именно это, они решают свою проблему. теперь, поскольку я загружаю свои шрифты с моего собственного сервера, подход .htaccess не помог мне. то, что избавилось от сообщения об ошибке, показанного выше, однако, изменило путь к шрифту в css от относительного к абсолютному пути. теперь самое смешное - сообщение об ошибке больше не появляется при загрузке сайта, но значки тоже не отображаются! все еще нет изменений, но нет сообщения об ошибке. Я в замешательстве!

ОБНОВЛЕНИЕ 2 *

Я нашел исправление -

После изменения всех путей в css по сравнению с абсолютным (например, www.mysite.de/fonts/... вместо just/fonts/...) И добавление файла .htaccess, содержащего следующие строки:

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

в каталог /fonts, все отлично работает в Firefox, Chrome и Safari. У меня еще не было возможности проверить IE, но похоже, что это была проблема.

Надеюсь, что кто-то, кто столкнется с теми же проблемами, получит некоторую помощь от этого.

Ответ 1

Я знаю, что это старый пост, но это помогло мне разобраться в некоторых проблемах.

У меня есть стандартная конфигурация apache и mod_headers.

У меня есть /font/ папка в DOCUMENT_ROOT, добавив .htaccess в такую папку (<DOCUMENT_ROOT>/font/.htaccess), где контент, предложенный Маркусом, работал во всех браузерах:

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

Ответ 2

Если вы похожи на меня, изменение файла web.config - это то, что вам не разрешено касаться.

Попробуйте сохранить все файлы шрифтов (.eot,.ttf и т.д.) в своей локальной папке и привязать их к ним локально, а не к CDN FontAwesome. Сбрасывал его в IE и FF для меня каждый раз.

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }

Ответ 3

Вам нужно добавить локальное правило, если вы хотите, чтобы Firefox использовал шрифт при установке на компьютер. См. https://developer.mozilla.org/Web/CSS/@font-face.

@font-face { font-family: 'FontAwesome'; src: local(''FontAwesome'); }

Ответ 4

<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css'; return false;" media="all" rel="stylesheet" type="text/css">

Добавьте эту строку в файл header.php темы, которую вы используете. Это исправление сработало для меня.