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 would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:
Header set Access-Control-Allow-Origin "*"
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.
Ref from: here