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

In my case, I sloved problem with inserting font-face style code

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty in header on your index.html or php page, in style tag. Works for me!

Answer 2

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 3

I had a similar problem. The fontsquirel demo page was working in FF but not my own page even though all files were coming from the same domain!

It turned out that I was linking my stylesheet with an absolute URL (http://example.com/style.css) so FF thought it was coming from a different domain. Changing my stylesheet link href to /style.css instead fixed things for me.

Answer 4

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

Using an .htaccess Access Control Allow Origin rule didn't work for me when I was confronted with this issue.

Instead, in IIS in the web.config insert the system.webServer block shown below.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

This worked like a charm for me. If you need to restrict access to particular domain, replace the * with the domain.

Answer 6

I was having the same problem getting a font to display properly in Firefox. Here is what I found to work for me. Add a slash before the directory holding the font in the url attribute. Here is my before and after versions:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

notice the leading slash before 'fonts' in the url? This tells the browser to start at the root directory and then access the resource. At least for me - Problem Solved.