The @Font-Face Firefox Fiasco
In Firefox, web fonts must be on the same domain as the page using them unless you’ve updated HTTP access controls to allow for cross-origin resource sharing. It seems Firefox is the only browser to adhere to the specification in this regard.
So, you’re building out an awesome Tumblr theme and notice fonts aren’t rendering in Firefox because they’re hosted on a different domain. Changing the access controls is hard and can’t be done on sites like Tumblr. What do you do?
Base64 encode them.
Yes, it will inflate the size of the CSS. But you’re eliminating a request. A tradeoff I can live with. Here’s how to do it in two easy steps.
1. Base64 encode the font file
cat /Volumes/Entypo/@font-face/entypo-webfont.ttf | openssl enc -base64 | tr -d '\n' | pbcopy
2. Paste the data into the stylesheet
@font-face {
…
src: url('data:font/opentype;base64,<< BASE64 ENCODED DATA HERE >>') format('truetype');
…
}
Further reading
- Data URIs on css-tricks.com
- @font-face on Mozilla Developer Network
7 Comments
Anon July 05, 2012
OpenSSL? Oy! What’s wrong with /usr/bin/base64?
Brian Ryckbost July 05, 2012 http://ryckbost.com
@anon: absolutely nothing, I just knew about openssl. Thanks for the tip though
Robert O'Callahan July 05, 2012
I believe Firefox is not the only browser to do this
-IE9 and IE10 also impose the same-origin restriction.E.J. Dyksen August 21, 2012
Ha, was just dealing with this today.
Two things:
1) You can do this automatically in the Rails asset pipeline by calling asset_data_uri. Makes things nice and clean from a dev perspective.
2) IE 7 & 8 (not 9) will choke completely on the @font-face (and maybe the whole CSS file)—they have a 32k limit on data urls. Splitting out a separate IE fonts CSS gets around this.
Brian Ryckbost August 21, 2012 http://collectiveidea.com
@E.J.: Whoa, I had no idea about asset_data_uri. Thanks for pointing that out!
dan March 03, 2013
I can live with the trade off too. thanks for a great post
ccp April 12, 2013 http://ccp-asoiaf.tumblr.com
Oh thank you so much, I’d despaired of ever finding a solution to this problem. I can’t tell you how relieved I am to finally find a fix for this, but thank you for taking the time to write this.
Post a Comment