Geek Answers Handbook

Why doesn't this @ font-face code work in Firefox 3.6?

I am trying to load a font using the CSS @font-face rule. It works for me in every browser (including IE6), except for Firefox 3.6 and possibly even lower. 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 created by Font Squirrel , so theoretically it should be perfect. I tried the live head headers plugin and it shows that it is not being requested at all. Although a font downloaded via Google web fonts works fine.

Does anyone know any reservations in 3.6 that might cause such a problem? I tried to run it locally and from the server, it did not matter.

Please keep in mind that I only tested Firefox 3.6 for Mac. I will try to check if the version of Windows is working correctly.

Any suggestions would be greatly appreciated, thanks.

+4
source share
2 answers

Got it!

This is because I have fonts installed locally. Therefore, using the smily hack invented 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; }
+3
source

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

Hope this helps.

+3
source

More articles:


All Articles