Ten Great Free Fonts Cross-Browser: A Case Study In @Font-Face

Mar 9, 2010

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.

There isn’t.

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:

Ten Great Free Fonts Cross-Browser

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.

Appearances Deceive

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

Windows problems.

Boing Boing

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…

Sharing Options:

Leave a Comment

Previous post:

Next post: