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
    OR
    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:
    <FilesMatch "\.(ttf|otf|eot)$">
        <IfModule mod_headers.c>
            Header set Access-Control-Allow-Origin "*"
        </IfModule>
    </FilesMatch>

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

Add new comment