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.

This may not matter, but in my @font-face declarations I always have another line with a `.svg` version too like so `url('TradeGothic.ttf#tradegothic') format('svg');` — Novocaine, Sep 06 '13 at 15:53
It seems to be working as expected for me in FF, I can see both. Can you put a screenshot of the difference you are seeing? — zmanc, Sep 06 '13 at 15:54
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. — JCKnoell, Sep 06 '13 at 15:59

Adam · Accepted Answer · 2013-09-06T16:18:27.977

0

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

edited Sep 06 '13 at 16:18

answered Sep 06 '13 at 16:00

Adam

41,349
10
58
78

Do you really think the network inspector in firefox is lying when it says 404? This is the URL firefox is trying to access: http://www.cleantelligent.com/test-site/TradeGothic.ttf – Adam Sep 06 '13 at 16:02
I never said it was lying. My point is that I have it correct on my site. The actual url is http://www.cleantelligent.com/wp-content/uploads/fonts/TradeGothic.ttf The test site should be referencing the correct files on my server, but the font files themselves are on the live site. – JCKnoell Sep 06 '13 at 16:06
I never said your files weren't on your server, I just said they are not being pointed to correctly, which they aren't. – Adam Sep 06 '13 at 16:07
I fixed it on the test-site so they point back to my live server. Try it now. I also fixed the link you are trying. the files themselves are there now – JCKnoell Sep 06 '13 at 16:10
Fine, but your woff files are still resulting in a 404. – Adam Sep 06 '13 at 16:13
Well, now it's working. So, my question Adam, is why does it now work on the test-site? Obviously you are spot-on with your answer, but then how do I fix it? It's apparently no linking to the fonts. Do I need to use absolute links in my css? – JCKnoell Sep 06 '13 at 16:13
so, how do I fix it? Any idea? – JCKnoell Sep 06 '13 at 16:14
Ideally, you would do as I mentioned in my answer - get rid of the tag in your theme, upload your fonts so they reside in your theme folder somewhere, and reference them using a relative path from your CSS file. But I have a hunch that removing the tag from your theme will probably break a bunch of things, which is why you probably put it in there in the first place. Don't use the tag - http://stackoverflow.com/questions/1889076/is-it-recommended-to-use-the-base-html-tag – Adam Sep 06 '13 at 16:16
Ah... Yeah, there's a ont of things here that I didn't design. They brought me on to fix those things. I wouldn't have used the base tag... So, place all fonts in the theme, then use relative links? I mean, it's working on some pages and not on others... Would that fix it? I'll give it a shot. Thanks for your patience! – JCKnoell Sep 06 '13 at 16:20
The problem with using the base tag is that you can't use relative paths in your CSS, because they will then end up relative to your base tag href. If you have to use the base tag for now, then use absolute paths for the time being. – Adam Sep 06 '13 at 16:22
Huh... Even using absolute paths (http://www.cleantelligent.com/wp-content/themes/cleantelligent/fonts/tradegothic-webfont.woff), it's still not working... But just for the subheads. Everywhere else the TG is working... I'm somewhat confused... – JCKnoell Sep 06 '13 at 16:28
I've double-checked it, and it's there... Sigh... I really am so confused and have no idea why this won't work... I'm sorry I need you to hold my hand, but I'm so new to fonts. – JCKnoell Sep 06 '13 at 16:32
This is what your theme folder looks like: http://www.cleantelligent.com/wp-content/themes/cleantelligent/ There is no fonts directory in there. – Adam Sep 06 '13 at 16:33
Also, this no longer is a font issue, it's a path/reference issue. – Adam Sep 06 '13 at 16:33
Ah! Try it now. Wow, this got confusing quickly. But either way, it's still not working on my stage site... I wish I could just give you access there because updating stuff on live is such a pain. (we have 4 servers) What do you mean by path/reference issue? – JCKnoell Sep 06 '13 at 16:34
All I can do is tell you to make sure the fonts are where you say they are. Open up your developer tools (F12) in firefox and look at the network tab, you should see some 404 errors next to your font files - it will give you the link where your browser is looking for the files and then you will understand why it's not working. – Adam Sep 06 '13 at 16:37

Font Face not working in Firefox

1 Answers1