CSS @Font-Face Not Working with Firefox

CSS @font-face not working with Firefox, but working with Chrome and IE

LOCALLY RUNNING THE SITE (file:///)

Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:

security.fileuri.strict_origin_policy

Set it to false and you should be able to load local font resources across different path levels.

PUBLISHED SITE

As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:

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

Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.

A nice recap is available here

CSS: Why is @font-face not working on firefox?

It is because of some security policy for Firefox browsers. It has a simple solution of disabling that policy. Search about:config in address bar. It will show a warning about voiding the browser's warranty and making it unstable. Take that risk. Now in the page search security.fileuri.strict_origin_policy and double click on it to turn its boolean value to false. This should solve your problem.

font-family not working in Firefox, but works in all other browsers?

Try clearing the cache in Firefox.

Also consider embedding the fonts so that it is more compatible across all browsers and clients. http://www.google.com/webfonts

Some people discussed this exact problem.
http://forums.madcapsoftware.com/viewtopic.php?f=9&t=15267

Mobile Firefox and Chrome not recognizing @font-face

This seems like a duplicate from: @font-face Not Working in Chrome for Android

The problem may be related to your font-family declaration (I can't tell because you haven't posted that part). If, for example, you had this:

font-family: fghjkjh, 'jump_startregular', sans-serif;

...Chrome for Android would simply pretend that fghjkjh is installed (but really use the default Android font) and ignore everything else. (Not sure if this is a bug or a feature.)

In which case, the solution is to move 'jump_startregular' to the front - and possibly add a local source to the @font-face block instead, which probably causes problems with other older browsers.

"Taken word for word from the link mention above"

If this doesn't work, I suggest you use google fonts instead.

CSS font face is not working on Mozilla Firefox, Microsoft Edge and Opera

Try a relative path, from perspective of your css file. You need an extra font-family for each weight, like this:

@font-face {
  font-family: 'DNRM';
  src: url('../fonts/DINRoundWeb-Medium.eot');
  src: url('../fonts/DINRoundWeb-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/DINRoundWeb-Medium.woff') format('woff');
}

@font-face {
  font-family: 'DNRR';
  src: url('../fonts/DINRoundWeb.eot');
  src: url('../fonts/DINRoundWeb.eot?#iefix') format('embedded-opentype'), url('../fonts/DINRoundWeb.woff') format('woff');
}

Font Face not working in Firefox

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

---

Related Topics