css @font-face not working with firefox, but working with chrome and IE

Question

Ok I've been at this for some time and am now bewildered. 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 are included, cause i know firefox is not too friendly about cross-domain imports.

But this is all just static html and there's no question of cross-domain.

On my landing-page.html I do a css import like so:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Within the main.css I have another imports like so:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

and within the type.css I have the following declarations:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }


body {font-family: "DroidSerif Regular", serif; }
h1 {font-weight: bold; font-family: "DroidSerif Bold", serif;  }

I have a directory called "font" in the same location as type.css. This font directory contains all the woff/ttf/svg files etc.

I'm stumped on this one. It works in Chrome and IE but not on Firefox. How is this possible? What am i missing?

Thanks.

Answer 1

I don't know how you created the syntax as I neved used svg in font declaration, but Font Squirel has a really good tool to create a bullet proof syntax font-face from just one font.

http://www.fontsquirrel.com/fontface/generator

Answer 2

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 3

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 4

*changed to better fit local/published cases.

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

Answer 5

This is a problem with how you setup your font-face's paths. Since you didn't start the path with a "/", Firefox will attempt to find the font's based on the path the stylesheet's in. So basically, Firefox is looking for your font in the "root/css/font" directory instead of the "root/font" directory. You can easily fix this by either moving the font folder to the css folder, or adding a / to the beginning of your font paths.

Try this out:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

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.

Answer 7

Try nerfing the local source declaration in your @font-face directives.

There's a known bug in either Firefox or the Google Font API that prevents the variants of fonts to be used if the font is installed locally, and matches the defined local name:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

To effectively nerf the local declaration, just make your local source string some nonsense. The generally accepted convention for this is to use a the smiley unicode character ("☺"). Why? Paul Irish has a great explanation up on his blog:

http://paulirish.com/2010/font-face-gotchas/#smiley