Geoff Evason

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:

1. Go to fontsquirrel.com and download the font-face kit you want to use.
2. Go to the fontsquirrel font-face generator and upload the .ttf file from the kit you just downloaded.
3. Select the ‘Expert’ option.
4. 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)
5. Under the CSS options select ‘Base64′ Encoding.
6. 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.