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 firefoxUnder thee , 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.

One of our users was having an issue with embedding fonts in his theme, and he linked me to this clever solution. Firefox has a policy that disallows you from embedding a font file that is not on the same host as the CSS that embeds it. To get around this, you can Base64 encode the font directly into your CSS.

It's not ideal, but it works!