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.