Cross domain workaround for @font-face and Firefox
All major browsers (even ie4+) now support the @font-face css property, which is great news for designers. Unfortunately there are still some kinks:
- Different browsers support different formats. You can specify multiple formats within a css file, and as long as you can provide .eot, .ttf, and .svg you’ll be okay.
- Firefox (which supports @font-face from v3.5) does not allow cross-domain fonts by default. This means the font must be served up from the same domain (and sub-domain) unless you can add an “Access-Control-Allow-Origin” header to the font.
- At the time of writing, you cannot set the “Access-Control-Allow-Origin” header on S3
I wanted to use @font-face served up from cloudfront – so here is what I did:
- Go to fontsquirrel.com and download the font-face kit you want to use.
- Go to the fontsquirrel font-face generator and upload the .ttf file from the kit you just downloaded.
- Select the ‘Expert’ option.
- For format select ‘TrueType’, ‘EOT’, and ‘SVG’. (Woff is a compressed format only supported by firefox, but firefox also support .ttf, so woff is extraneous)
- Under the CSS options select ‘Base64′ Encoding.
- Download and use the files provided.
What does this do? It actually embeds the TTF font within the CSS file, so it can be served up directly from S3/cloudfront and still work on Firefox. This solution works, but is sub-optimal. In particular, it bloats your css for other browsers (like mobile safari and IE) that can’t use the TTF format. 
