Fixing Firefox font-face Cross Domain Problem

On a recent post I used a web font via the @font-face CSS directive. When viewed from Firefox it was working fine on my local development machine, but not from my Blogger post. Here's what I was using locally:

@font-face {
    font-family:'GraublauWeb';
    src:url(GraublauWeb.otf) format("opentype");
}

And here's what I used for my post:

@font-face {
    font-family:'GraublauWeb';
    src:url(http://pics.cssrule.com/fonts/GraublauWeb.otf) format("opentype");
}

As it turns out, Firefox was blocking the use of the font since my post is served from www.cssrule.com, and the font is on a different sub-domain, pics.cssrule.com. Firefox intentionally blocks fonts from different domains, as a measure of protection against someone just linking in your fonts, effectively stealing your server bandwidth and possibly violating the font's EULA.

In my case, serving the font from the same domain as my post isn't an option (unless I jump ship from Blogger and self host my blog). But, there is a way for the Web Server to tell
Firefox it's OK to use the font. On my web server I edited my apache configuration (/etc/apache2/apache2.conf in my case), adding the following lines:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

The AddType directive adds the appropriate MIME types to the HTTP response. The <FilesMatch> directive applies the directives it encloses only to files with extensions .ttf, .otf, and .eot. The <IfModule> directive checks to see that the Apache headers module is loaded. And finally when those conditions are met, we set the Access-Control-Allow-Origin header to *. You can also put these directives into a .htaccess file.

In my case there was one other thing I needed to do on the server. I didn't have the "headers" module loaded in Apache, so I added it and restarted:

sudo a2enmod headers
sudo /etc/init.d/apache2 restart

After that the font started rendering in Firefox, even though it is coming from a different domain. If you are still having problems, note that you can view the HTTP headers returned from the server using the Net panel of Firebug. Here's a screen-shot of my Firebug net panel. The changes to the response header are highlighted: