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

Question

The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I\'m suspecting it to be a problem of how my CSS files ar

Answer 1

Can you check with firebug if do you get some 404? I had problems in the pass and I found that the extension was the same but linux file.ttf is different from file.TTF... and it worked with all browsers except firefox.

Wish it helps!

Answer 2

Because of that this is one of the top Google results for this problem I would like to add what solved this problem for me:

I had to remove the format(opentype) from the src of the font-face, then it worked in Firefox as well. It worked fine in Chrome and Safari before that.

Answer 3

Are you testing this in local files or off a Web server? Files in different directories are considered different domains for cross-domain rules, so if you're testing locally you could be hitting cross-domain restrictions.

Otherwise, it would probably help to be pointed to a URL where the problem occurs.

Also, I'd suggest looking at the Firefox error console to see if any CSS syntax errors or other errors are reported.

Also, I'd note you probably want font-weight:bold in the second @font-face rule.

Answer 4

I had the same problem and solved it by adding meta for content:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

This happens in Firefox and Edge if you have Unicode texts in your html.