Шрифт, который я установил (@font-face), не работает во всех браузерах - только Chrome

Question

Я установил шрифт на сайт, но он будет отображаться только в Chrome (я проверял в Firefox и Explorer). Я не знаю, если я что-то упустил в кодировании?

Лицо шрифта

@font-face {
font-family: 'octin_sports_freeregular';
src: url('octinsports-webfont.eot');
src: url('octinsports-webfont.eot?#iefix') format('embedded-opentype'),
     url('octinsports-webfont.woff') format('woff'),
     url('octinsports-webfont.ttf') format('truetype'),
     url('octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;

}

Тогда в HTML:

<link rel="stylesheet" href="http://weareprodigy.co/stylesheet.css" type="text/css"     charset="utf-8">

И в заголовках:

h1 {

font-size: 32px;
font-size: 2.25rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
text-shadow: 2px 4px 3px rgba(0,0,0,0.7);
}


h2 {
font-size: 28px;
font-size: 1.875rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
color: #8CC63E;
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: black;
}

Ссылка: http://www.weareprodigy.co/

Answer 1

Каждый браузер использует свой способ загрузки шрифта, некоторые используют EOT файл, некоторые используют WOFF файл.

В настоящее время у вас есть только EOT файл загружен на сервер, и Chrome использует EOT файл, но IE & Firefox будет использовать один из двух других форматов.

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

РЕДАКТИРОВАТЬ

Только что посмотрел CSS, Нет необходимости иметь дополнительный style.css на корневом уровне, потому что в реальной теме шрифты уже вызваны. Я предполагаю, что шрифты были размещены на корневом уровне, а не в папке темы.

РЕДАКТИРОВАТЬ 2

Измените ваш файл стиля style.css (wp-content/themes/epik/style.css), чтобы показать это

@font-face {
font-family: 'octin_sports_freeregular';
src: url('../../../octinsports-webfont.eot');
src: url('../../../octinsports-webfont.eot?#iefix') format('embedded-opentype'),
     url('../../../octinsports-webfont.woff') format('woff'),
     url('../../../octinsports-webfont.ttf') format('truetype'),
     url('../../../octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;
}

Поскольку шрифты находятся в корневом каталоге, они должны быть направлены в корневой файл, поскольку css ищет шрифты в папке темы epik atm.