How To Get Firefox To Load @font-face From Another Domain

I finally got around to integrating my Tumblr into the site (see the new Notes section), but not before banging my head against the wall trying to figure out why my awesome font from League of Moveable Type wasn’t loading.

You may have been under the impression that the site navigation and content headings were images or sIFR or some other form of web wizardry (because of how awesome they look) but they’re actually using a font being loaded right from my web server. The font is called League Gothic and it’s an open source font from the League of Movable Type, a community for the revolution of free, professional, and open-source typography.

Anyway, to make a long story short, the font was loading fine here but not on Tumblr. At first I thought it was a problem with the path in the CSS file but it turns out Firefox prevents certain resources from being loaded from a separate domain unless it is explicitly allowed in the HTTP header. Awesome.

Luckily (if the fonts are on an Apache web server) you can explicitly allow this by adding some code to your .htaccess file.

[code lang=”plain” title=”.htaccess”]
<files ~ "\.(ttf|woff)$">
Header add Access-Control-Allow-Origin "29thfloor.tumblr.com"
</files>
[/code]

Replace “29thfloor.tumblr.com” with the domain you want to allow. You could change it to “*” to allow any domain, but depending on the fonts you’re using and how they are licensed you could be opening yourself up to some sort of legal action that I don’t know anything about. So don’t do it and then say I said it was cool.