Font Face not working in Firefox

Question

I have read this thread: @font-face not working in Firefox or IE - how can i figure out why?

And it's fairly similar to my problem, but I didn't find the answer there.

My test-ste can be found at: http://www.cleantelligent.com/test-site/home/ (Not all the formatting is correct, because it's a test-site i threw together, but the fonts are my concern.)

I am working on a dual-font site and they are working just fine in chrome and ie. However, firefox will only recognize my 'platin' font, not 'tradegothic'. There are actually some parts of the site that do recognize the TG font, but for example, on the slider, the h1 is platin, but the h2 should be TG, and is not. Same thing on other pages.

My coding is correct, as far as I can tell, and the files are in the right place. Any idea why it wouldn't be working?

/*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');
}

I used font-squirrel to get the cross-broswer compatible files into my system and css. They only don't work in firefox.

check www.cleantelligent.com/wp-content/themes/cleantelligent/images/Capture.JPG And Capture2.JPG

The Title should be Platin, which it is, but the subhead should be TG. On both those shots. (Capture.JPG is a screenshot from another page not on my test site, but which is facing the same issue.

Answer 1

The problem is quite obvious - you're getting 404 errors for your TTF files. They are not there (or their file names are different).

EDIT

By putting TradeGothic.ttf in the url('') part does not allow your server to magically find your font file - you need to reference it via the path to the actual font file.

In your case that would be by putting /wp-content/uploads/fonts/TradeGothic.ttf

I'm not advocating you do that, because (1) you should be storing your assets in your theme folder and (2) you should be referencing the file using a relative path from your CSS file (but that means you'd have to get rid of the tag in the head of your theme and......just use the path I provided for a quick fix, otherwise you'll be at this all day.

EDIT 2

For clarity, this is how I deal with my fonts in WordPress:

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

and the CSS in style.css looks like:

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