Anthony McLin

@font-face

16 Sep 2009

Winter is coming soon, and that means snow at Mammoth, and that means skiing!

Continuing on the idea of font replacement, I've been experimenting a bit with using @font-face in CSS. Last week I quickly built a site for interior designers Alexandra and Michael Misczynski. I decided to use @font-face to provide an .otf font to those visitors with new browsers that can display it. I'm really trying to work the the idea of displaying an enhanced experience for newer browsers, instead of the previous thought of making the site look identical on as many browsers as possible.

The problem with making a site look identical is that you get trapped in a never ending circle of browser compatibility hacks, especially related to Internet Explorer 6. Fixing things in IE6 usually ends up breaking something for everything else, and frequently you can't implement features at all.

Firefox 3.5, Safari 3 and later, Chrome, and Opera all support @font-face for standard .ttf and .otf fonts. So I tried it out this time and for the most part it works pretty well (or at least better than font-replacement techniques). The biggest downside is that although IE has supported @font-face for a long time (years longer than any other browser) it won't handle .otf or .ttf, opting instead for a proprietary format .eot.

Microsoft does provide a free tool for converting fonts to eot format. It's clunky, the interface is horrible and the process convoluted, but there's not much in the way of alternatives. WEFT is an old piece of software and it turned out that it doesn't work on Windows XP x64 (which I use for my previsualization work). So I fired up an XP virtual machine on my Mac, only to find that WEFT doesn't work with .otf fonts.

I tried various freeware and shareware apps for converting .otf to .ttf. Either they were old and wouldn't install, they would crash, or they could only go from .ttf to .otf and not the other way around. At the moment I'm trying this method on OSX, but it involves first updating XCode and installing Mac Ports, relatively time consuming just for the purposes of converting a font format.