Internet Explorer Isn’t The Problem This Time
Since the excitement about @font-face began, certain pages showcasing @font-face fonts have gotten referenced a lot. Unfortunately most of them were not created to display in Internet Explorer. This creates the impression that something must be wrong with Internet Explorer’s @font-face implementation in IE 6, 7, and 8.
Oh Yeah? Show Me An Example
I took a page titled 10 Great Free Fonts for @Font-Face Embedding by Ralf Herrmann, added the EOT files, left the original @font-face syntax intact, and everything works as expected. Check out the results here:
In the interests of a more accurate side-by-side comparison, you’ll notice that I did comment out the text-shadow hover effects. Text-shadow doesn’t work in IE. For that, I offer no excuses or explanations.
The example page has a notes section at the bottom, detailing what I did.
A big part of the problem was that, for a long time, Microsoft’s abominable WEFT tool was the only app available for creating EOT files. And EOT (Embedded Open Type) is the only file format that IE will accept.
Today, you can convert a TTF font file to an uncompressed “EOT Lite” file using Font Squirrel’s Generator or, create an actual, natively compressed EOT file using EOTFAST. Another online option is ttf2eot.
How @Font-Face In IE Differs
@Font-Face has been in Internet Explorer for over ten years.
No matter what browser you’re targeting, @Font-Face
If WOFF Is Good For The Goose, EOT Is Good For The Gander
Somebody who knows what they’re doing could spend ten minutes and either fix the font’s hinting in BPreplay or convert it to the TrueType flavor of OpenType…