JOE DESIGNS

A dev shop in Albuquerque New Mexico.

CSS Font-Face

Filed under "general" on 12/30/09

CSS Font-Face is a great way to embed fonts into your web layouts. You'll need two fonts, one that is either TTF (true type font) or OTF (open type font). These fonts will be supported in most non IE browsers. For IE browsers, you'll need a EOT font. Microsoft supplies a windows only script "WEFT" to convert true type fonts to EOT (embeddable open type). Instead of using this tool to convert your fonts, I suggest using this web utility to convert to EOT. Its a real time saver, especially if your on a Mac.

It is important to have the .eot font defined before the ttf or otf, otherwise IE will not work properly.

This is a good solution for existing websites, as it just takes a few lines of code to import your font, and then declare within your existing style sheet definitions.