Kdn

Custom fonts in Internet Explorer have been around for ages with @font-face. As you all know Internet Explorer does bearly follow the last generation web standards. If you have read my previous post about @font-face, you know that the font format Embedded OpenType(.eot) works out of the box in IE.

Almost every font you buy/get is in either TrueType(.ttf) or OpenType(.otf) format. The first step to get your custom font going in IE is to convert your font into Embedded OpenType(.eot).

Convert your font

• TrueType to Embedded OpenType
• All – OnlineFontConverter
• Microsoft WEFT
• Screencast by Snook – TTF/OTF to EOT

Upload both your EOT file and your OTF/TTF file to your webserver and declare the CSS like this.

The magic

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.eot);  }
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.otf); format("opentype"); }

Remember to declare font-face for IE before you declare it for Firefox/Safari/Opera/All the other browsers that isn’t stuck in the 90s.

@Font-Face is only one of several technics to get selectable custom fonted text on websites.

• @Font-Face
• sIFR
• FLIR

Licensing

By adding custome fonts to your site you might run into truble if you don’t check the license on the font you want to use. Some font designers have restrictions so you have to buy a custome license, some arn’t alowed at all. One of my favorite font designers exljibris alow @font-face usage of his fonts as long as you add a css comment close to your font declaration.

Fileformats

You can use a variety of different file formats when you embed a font. You can even serve the file as xml with svg directly into a xhtml page.

• TrueType(.ttf)
• OpenType(.otf)
• Embedded OpenType(.eot)
• Scalable Vector Graphics(.svg)
• TrueDoc(.pfr)

There are however a restriction on what filetypes you can use. Check the compatibility chart below.

Example

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.otf); format("opentype"); }

Compatibility

Table is licensed with Creatice Commons 3.0 by-sa from author Wikipedia