Cross domain workaround for @font-face and Firefox

All major browsers (even ie4+) now support the @font-face css property. 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 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.

Workaround:

  • 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.

It actually embeds the TTF font within the CSS file. 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.


Leave a Reply