How to Embed Fonts for Posterous & Tumblr


2010 certainly seems to be the year of font embedding. There are new services centering around fonts popping up like daisies. Though they are all certainly useful and have their place, there’s one I’ve been relying on more and more, called Font Squirrel. The reason why I like Font Squirrel so much is because they offer a huge helping hand when embedding fonts with the CSS technique known as @font-face.

When comparing with Javascript methods like Cufón and Typkit, I mainly prefer @font-face embeds for it’s consistency (not even going to bring up Flash-based embeddings… wait, oops). I’ve found that when testing out fonts in tight areas like navigation and headings, Javascript methods tend to jump around a bit after the page has loaded, making things tricky to guess when margins and paddings are crucial. Font-facing, on the other hand has much less lag (with the exception of what Paul Irish calls “FOUT“) and also tends to render the same in all browsers.

So as I was building a theme for Posterous this past week, I used @font-face and everything looked fine locally. Font Squirrel even works some font magic to make IE cooperate with no effort at all. So I was happily moving along until I had posted everything online, linking to my assets and I realized that things looked great in every browser but Firefox. For reasons unknown to me at the time, Firefox would not show my embedded font. This was a bit of a surprise, so I spent a few minutes tweaking my links and making sure everything was right. This turned into a few HOURS of headache and frustration. I’ll spare you the horrors and just get to the juicy bits.

The Fox Fix

As it turns out, Firefox 3.5+ prevents cross-domain linking of font files as a security measure. What this means is that if you’re trying to link to a font from a different site, as you’re currently forced to do with services like Posterous and Tumblr (unless you use Typekit), it will work in every browser but Firefox. Thankfully, however, there’s a workaround. Font Squirrel can actually embed the font into the CSS using Base64 encoding.

What you’ll need to do is upload your font to Font Squirrel’s Font Face Generator and choose the expert mode.

Here are the settings that I used.

We don't need WOFF since Firefox is the only browser that uses it and we'll be embedding Firefox's font as a TrueType.

Font Squirrel makes an amazing little zip file for you with CSS and and example HTML file to get you going. With the Base64 encode you’ll have a super long file, but your fonts will work in all browsers. What I did was copy the CSS and paste it at the bottom of my main CSS file to help eliminate any possible errors and then changed the links to fit.

Hosting the Files

If you currently don’t have a server of your own to host the files, then the easiest solution is to use DropBox. You can put up to 2GB on Dropbox completely free and then link to the files in your theme. All you need to do is put the folders/files somewhere in your Public Dropbox folder, and get the link by selecting “get public link.” Then plug that into your theme/CSS file.

If you’re curious, the theme I made is still in the works for full Tumblr and WordPress compatibility, but you can check it out on my Posterous blog about Japan and missions at http://reedsinjapan.com

Posts and People that Helped Me

Adam Singer from Posterous gave me a big hand troubleshooting this.
Cross domain workaround for @font-face and Firefox
The article that showed me the error in Firefox’s ways
Other reasons I like Drop box.