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.
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.
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.