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

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.

Answer 2

No need to mess around with settings just remove the quotes and spaces from the font-family:

this

body {font-family: "DroidSerif Regular", serif; }

becomes this

body {font-family: DroidSerifRegular, serif; }

Answer 3

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.

Answer 4

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");

Answer 5

My problem was that Windows named the font 'font.TTF' and firefox expected 'font.ttf' i saw that after opening my project in linux, renamed the font to propper name and everything works

Answer 6

For this font in particular you should be using the Google Font API:

http://code.google.com/webfonts/family?family=Droid+Sans

If you still want to use FontSquirrel's kit generator, use the Smiley hack option to eliminate local font problems. After you've generated a kit, check that the generated demo.html works in FireFox. I bet it does. Now upload it to your server -- I bet it works there too since FontSquirrel is awesome.

However, if you broke the generated kit code while integrating it into your project, use the standard methods of debugging -- check for 404's and go line by line until you find the problem. WOFF should definitely work in FF, so thats a good place to start.

Finally, if none of this works, update FireFox. I wrote all this assuming that you are using the latest; but you didn't specify what version you are checking in, so that could be your problem too.