It would be just great if we could learn something new every day. I guess the best way to do it is by trying new stuff every time it’s possible.
While working on LeadConverter, I had a situation where it was needed to use an iconic font externally declared via @font-face. So, in this situation, my iconic font worked perfectly in all major supported browsers, excepting Firefox. It was such disappointing situation.
After I’ve pulled out half of my hair searching for a solution, I found out that Firefox doesn’t allow cross-domain fonts by default – unless you set an Access-Control-Allow-Origin header to the font.
The scenario
In this case, using the iconic font, the <i class="icon-user"></i> should generate an user icon. And it does for most of browsers, excepting Mozilla.
<!doctype html> <html> <head> <title></title> <link rel="stylesheet" href="http://www.example.com/style.css"> </head> <body> <i class="icon-user"></i> </body> </html>
The style.css would contain all necessary @font-face declarations for the iconic font.
The problem
It seems that, for security reasons, Firefox simply don’t allow you to use by default a font that is not hosted on your domain, not even on your subdomain. The CDN based websites can be also affected in this case.
The solution
After some investigations, I found out the workaround: set a Access-Control-Allow-Origin header to the font.
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Add the snippet above to a .htaccess file within the same folder as the font file.
Also, if you are using nginx as your webserver you will need to include the code below in your virtual host file:
location ~* \.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
Best-case scenario: set this header and get rid of this problem.
Worst-case scenario: you’re using Amazon Web Services. In this case, you should know that, at this time, you’re not allowed to specify the Access-Control-Allow-Origin header for your files. Read more about this subject on their forums.
Options
- Serve the fonts from another hosting service, where you can set the headers.
- Embed the font in your as a Base64 string.
Read more
Of course, in the end I managed to solve my problem :)
In case you want to read more about this, here are other two interesting articles on this topic:
Thanks Catalin, glad you were able to find a successful solution to this hair pulling problem in Firefox!
nice trick
I was caught into same situation in march of this year, and Here is what I have written on the same. http://www.xpertdeveloper.com/2012/03/webkit-issue-for-subdomains/
Hope this helps too….
really very cool trick it solve my problem.
very cool trick
Well although I had faced such problems in the past but never thought of finding a solution to successfully displaying cross domain fonts in Mozilla Firefox. I must say Your tricks is a nice find for designers like me.
Awesome :D You saved my project weloveiconfonts.com in Firefox :D
Thanks a ton! This solution really works.
Thank you sooo much (x-tra thanks for the nginx snippet)
My company just purchased custom fonts. Everything was going great until we began testing in Firefox. You’ve have saved me some valuable time =)
You saved me a lot of pain. Thank you.
Thanks dude! Works like a charm. Cheers!
Thanks!
I really need this one, but i don’t know where to put the codes you been talking for. Because my other FONT ICONS is not rendering in FIREFOX. Please Help me where do i need to put that codes to apply the effects? Thanks in advance :)
Carlo, you need to add the snippet above to a .htaccess file within the same folder as the font file.
Thank you man. I nearly killed myself :-).
I’ve been having some trouble getting an icon font to work in Firefox too. Although it’s not a cross domain font issue, I’ve tried adding that snippet to an .htaccess file in my fonts directory, but still no joy. I’ve tried adding the font with a :before pseudo element in my CSS and also with a in the HTML but neither way is working. Do you know if there’s anything else I could try…?