Collective Idea

Collective Idea Logo

Brian Ryckbost

The @Font-Face Firefox Fiasco

By Brian Ryckbost on July 05, 2012 in base64, css, and font-face

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

By Brian Ryckbost on July 05, 2012 in base64, css, and font-face

8 Comments

  1. Anon

    Anon July 05, 2012

    OpenSSL? Oy! What’s wrong with /usr/bin/base64?

  2. Brian Ryckbost

    Brian Ryckbost July 05, 2012 http://ryckbost.com

    @anon: absolutely nothing, I just knew about openssl. Thanks for the tip though

  3. Robert O'Callahan

    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.

  4. E.J. Dyksen

    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.

  5. Brian Ryckbost

    Brian Ryckbost August 21, 2012 http://collectiveidea.com

    @E.J.: Whoa, I had no idea about asset_data_uri. Thanks for pointing that out!

  6. dan

    dan March 03, 2013

    I can live with the trade off too. thanks for a great post

  7. ccp

    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.

  8. Brittany

    Brittany September 12, 2013 http://www.conncoll.edu

    THANK YOU SO MUCH! I’m working with a CMS that publishes sites to a staging server, then transfers to the live server. My fonts were stored on the live server, and I couldn’t figure out why things wouldn’t display correctly on the staging server. Your opening paragraph just solved all my problems. Big DUH. Thanks!

Post a Comment

Contact Us

Find us on Google Maps
Collective Idea
44 East 8th Street, Suite 410
Holland, Michigan 49423 USA 42.790334-86.105251

Follow us on the Interwebs

We are currently available for medium and long term projects. Please get in touch if we can be of service.