Why does this @font-face code not work in Firefox 3.6?

Question

I am trying to get a font to load via the @font-face CSS rule. I have got it working in every browser (including IE6) apart from Firefox 3.6 and maybe even more below that. Here is my current code.

@font-face {
    font-family: 'DigitaldreamFatRegular';
    src:    url('../fonts/digitaldreamfat-webfont.eot');
    src:    url('../fonts/digitaldreamfat-webfont.eot?#iefix') format('embedded-opentype'),
            url('../fonts/digitaldreamfat-webfont.woff') format('woff'),
            url('../fonts/digitaldreamfat-webfont.ttf') format('truetype'),
            url('../fonts/digitaldreamfat-webfont.svg#DigitaldreamFatRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

It was generated by Font Squirrel so should in theory be perfect. I have tried the live http headers plugin and it shows that it is not being requested at all. Although the font loaded via Google web fonts works perfectly.

Does anyone know of any caveats in 3.6 that could cause this kind of problem? I have tried running it locally and from a server, it made no difference.

Please bear in mind that I have only tested on Firefox 3.6 for Mac. I will try to see if the Windows version works correctly.

Any suggestions will be greatly appreciated, thanks.

Answer 1

Got it!

It is because I have the fonts installed locally. So by using the smily hack, thought up by Paul Irish, I can fix it. Here is the correct code.

@font-face {
    font-family: 'DigitaldreamFatRegular';
    src:    url('../fonts/digitaldreamfat-webfont.eot');
    src:    local('☺'), // This addition fixes it.
            url('../fonts/digitaldreamfat-webfont.eot?#iefix') format('embedded-opentype'),
            url('../fonts/digitaldreamfat-webfont.woff') format('woff'),
            url('../fonts/digitaldreamfat-webfont.ttf') format('truetype'),
            url('../fonts/digitaldreamfat-webfont.svg#DigitaldreamFatRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 2

Are you running the fonts from the same domain as your site? If you are, FF doesn't allow cross-domain fonts by default. You can add an “Access-Control-Allow-Origin” header to your fonts. Here's a link on how to do so http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

Hope that helps.