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.