Remotely-hosted web fonts and CORS
We're using web fonts on almost every site we develop these days, but I've recently been running into a cross-domain issue in Firefox. This isn't a new issue, but it's new to me. Most recently I encountered the problem while creating a Tumblr theme for the Elevator Up blog: as much as possible I wanted to use the same assets as the Elevator Up web site, but I ran into issues when referencing the remote font files.
Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. Firefox and newer versions of Internet Explorer enforce the Cross-Origin Resource Sharing standard, and thus only render web fonts served with the appropriate “Access-Control-Allow-Origin” response header. Chrome doesn't require the CORS header for web fonts.
The simplest - although not necessarily cheapest or most satisfactory - solution is to check if the font is available from a free or paid font hosting service as they've already solved this problem for us.
If you want to host your own fonts, you're going to have to do some extra work.
If the fonts are stored on a server under your control, you can edit the config to enable CORS, allowing the files to be accessed remotely. Additionally, check that your files are being served up with the correct mime types. You may get away with application/octet-stream, but better safe than sorry.
WOFF application/x-font-woff TTF application/x-font-ttf EOT application/vnd.ms-fontobject SVG image/svg+xml
Convert your binary font files to base 64 and embed them directly into your CSS file.
The last option is the epiphany I reached after many frustrating hours of trial and error. It turns out this solution has been widely used for several years already, if only I'd known where to look. This method is how Typekit delivers its fonts. In fact Typekit appears to be only returning font/opentype which is only partially-supported by IE (unless the fonts are set to installable).
Typekit CSS file view through Chrome's web inspector
To be on the safe side, I'm using Geoff Evason's method. It actually embeds the TTF font within the CSS file, so it can be served up directly from a remote server and still work on Firefox. This solution isn't optimal as it increases size of my CSS file, even for those browsers that won't use the embedded version of the font, but it does save on an HTTP connection for those that will.
If you'd prefer to roll your own font code, here's a handy dandy binary base 64 converter.
