шрифта не работает в Firefox

Question

Я прочитал эту тему: @font-face not working in Firefox or IE - how can i figure out why?

И это довольно похоже на мою проблему, но я не нашел там ответа.

Мой тест-Ste можно найти по адресу: http://www.cleantelligent.com/test-site/home/ (. Не все форматирование правильно, потому что это тест-сайт я бросил вместе, но шрифты моя забота)

Я работаю на сайт с двумя шрифтами, и они отлично работают в хроме и т. д. Тем не менее, firefox будет распознавать только мой шрифт «платин», а не «tradegothic». На самом деле есть некоторые части сайта, которые распознают шрифт TG, но, например, на слайдере, h1 является платиновым, но h2 должен быть TG, а это не так. То же самое на других страницах.

Мое кодирование верное, насколько я могу судить, и файлы находятся в нужном месте. Любая идея, почему она не будет работать?

/*header font*/ 
@font-face { 
font-family: platin; 
src: url('platin-webfont.eot'); 
src: url('platin-webfont.eot?#iefix') format('embedded-opentype'), 
    url('platin-webfont.woff') format('woff'), 
    url('Platin.ttf') format('truetype'); 
} 
/*content font*/ 
@font-face { 
font-family: tradegothic; 
src: url('tradegothic-webfont.eot'); 
src: url('tradegothic-webfont.eot?#iefix') format('embedded-opentype'), 
    url('tradegothic-webfont.woff') format('woff'), 
    url('TradeGothic.ttf') format('truetype'); 
} 

Я использовал шрифт-белка, чтобы получить совместимые с кроссбраузером файлы в моей системе и css. Они только не работают в firefox.

проверка www.cleantelligent.com/wp-content/themes/cleantelligent/images/Capture.JPG И Capture2.JPG

Название должно быть Platin, что она есть, но подзаголовок должен быть TG. На обоих этих снимках. (Capture.JPG - это скриншот с другой страницы, не на моем тестовом сайте, но который сталкивается с той же проблемой.

Answer 1

Проблема очевидна - вы получаете 404 ошибки для ваших файлов TTF. Их нет (или их имена файлов разные)

EDIT

поставив TradeGothic.ttf в URL («») часть не позволит вашему серверу волшебно найти файл шрифта. - вы должны ссылаться на него с помощью путь к файлу фактического шрифта.

В вашем случае это будет путем размещения /wp-content/uploads/fonts/TradeGothic.ttf

Я не защищаю вас от этого, потому что (1) вы должны хранить свои активы в своей папке темы и (2) вы должны ссылаться на файл, используя относительный путь из вашего CSS-файла (но это означает вам нужно будет избавиться от тега в голове вашей темы и ... просто используйте путь, который я предоставил для быстрого исправления, иначе вы будете на этом весь день.

EDIT 2

Для ясности, это то, как я справляюсь со своими шрифтами в WordPress:

themes/ 
my_theme/ 
    assets/ 
    css/ 
    style.css 
    fonts/ 
    myfont.ttf 
    myfont.eot 
    myfont.woff 
    myfont.svg 

и CSS в style.css выглядит следующим образом:

@font-face { 
    font-family: 'MyFont'; 
    src: url(../fonts/myfont.eot); /* IE9 & compatibility modes */ 
    src: url(../fonts/myfont.eot?#iefix) format('eot'), /* IE6-8 */ 
    url(../fonts/myfont.woff) format('woff'), /* Firefox, Opera */ 
    url(../fonts/myfont.ttf) format('opentype'), /* Chrome */ 
    url(../fonts/myfont.svg#myfont) format('svg'); /* Safari */ 
    font-weight: normal; 
    font-style: normal; 
}