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

Question

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

In addition to adding the following to your .htaccess: (thanks @Manuel)

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

You may want to try explicitly adding the webfont mime types to the .htaccess file... like this:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

In the end, my .htaccess file looks like this (for the section that enables webfonts to work in all browsers)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

I've had this problem too. I found the answer here: http://www.dynamicdrive.com/forums/showthread.php?t=63628

This is an example of the solution that works on firefox, you need to add this line to your font face css:

src: local(font name), url("font_name.ttf");

I'll just leave this here because my co-worker found a solution for a related "font-face not working on firefox but everywhere else" problem.

The problem was just Firefox messing up with the font-family declaration, this ended up fixing it:

body{ font-family:"MyFont" !important; }

PS: I was also using html5boilerplate.

I was having the same problem. Double check your code for H1, H2 or whatever style you are targeting with the @font-face rule. I found I was missing a coma after font-family: 'custom-font-family' Arial, Helvetica etc It was showing up fine in every browser apart from Firefox. I added the coma and it worked.