Last we left off, I’d just started going down the road of playing with
@font-face, sans IE. This is the follow-up where we bring Internet Explorer back into the equation and look at the hoops we need to jump through to bring it in line.
A quick refresher: following a different path than every other browser out there, IE requires a custom-created, rights-managed font file called EOT (Embedded OpenType). The syntax to safely serve up an EOT to IE was shown in that previously-mentioned post. What we’re covering here is, how in the world do you create an EOT file in the first place?
Well, there’s WEFT, Microsoft’s one and only tool for creating EOT files. Let’s try WEFT, shall we? Go to Microsoft’s site for WEFT and hit the download link. Wait, what’s this business about Internet Explorer 4 and Windows 98? Uh-oh.
The most recent WEFT point release was in 2003, but if you look at the screenshots on the tutorial for the most recent major version, you might be able to guess what sort of an experience you’re in for.
Obviously it’s Windows-only. I grabbed a copy and tried it in Windows XP under Parallels. That went well:
I’ve booted multiple virtual installations of Windows XP under Parallels, but that’s the oldest version of Windows I have on hand (what a ridiculous phrase to type) and it simply doesn’t want to run.
I have managed to use WEFT in the past. Back in the late part of the 90’s when it was still somewhat fresh, I distinctly remember grabbing a copy and converting some fonts to EOT. I also remember the GUI being a confusing pile of hurt, and the process being anything but transparent.
Essentially, you need to point WEFT at the page you’re trying to embed the fonts in, so a) it can create domain-specific hooks and only run on that site (good luck getting the EOT working locally or on a staging server), and b) so it can subset the character set to only the glyphs you’re actually using. The former is an overly-restrictive attempt at DRM. The latter is actually useful for controlling file sizes, aside from the total lack of manual control.
Microsoft mentions on the download page that some people report it working in virtualized Windows under OS X, and I have heard independent reports of it working for other people. But I’ve also heard I’m not the only one in the not-working camp. I guess if you get it working, consider yourself lucky in a pyrrhic sort of way.
But anyway, forget WEFT. Microsoft has clearly long given up on it. Abandonware isn’t going to solve today’s modern web design problems, what else have we got?
Searching that problem turned up Edward O’Connor’s post from a few months back about his experience installing command line tools that will ultimately generate EOT files.
At this point I’m going to cut a very long story short and say that, despite being fairly comfortable hacking around a Terminal window and installing remote packages and the like, I wasted almost a day doing this with nothing to show for it. I suspect there’s nothing wrong with Edward’s methods, but some OTF files seem to complicate things in a way it simply doesn’t account for. Others reportedly work; the ones I tried didn’t.
(As an aside: there are a few web-based tools out there that do similar without the command line hackery. TTF 2 EOT does what its name suggests, and there’s a tool called Online Font Converter that supposedly converts OTF files to TTF and a few other formats. I’m not linking to that one because I’m a little suspicious of the site (AdSense-heavy, and the zip files it produced wouldn’t open for me), but if you really want to find it just search for the capitalized title in the last sentence. But you’re probably better of using FontSquirrel anyway, mentioned below.)
(As a second aside, you might be luckier than I was. You might be able to use any of these tools to go from OTF to EOT and wonder what in the world I’m talking about. Given that I’m definitely not the only one who had this problem, it seems likely that sooner or later you might run into a font that just doesn’t want to convert. When that happens, keep reading.)
After spending that time hacking around in the Terminal I was ready to give up on the entire process of WEFT-less EOT files, and then Jonathan Snook happened to mention he had a method. A bit of dialogue resulted in my prodding him into doing a screencast, and voila:
The really important bit here, the part that I couldn’t get right before, is the manual adjustment in FontForge. The automated tools mentioned above in the OTF › EOT conversion chain don’t account for the namerecord tweaking that seems essential to get an EOT rendering in Internet Explorer. I had previously installed a tool that converted TTF files into XML so I could pull off the namerecord change in text. No such luck. FontForge’s awful XWindows GUI tool was the only thing that worked for me. No really, it’s ugly; the UI is even worse than WEFT. But it happens to work, which is its saving grace.
Also, between the time I started writing this post and now, FontSquirrel released a @font-face generator that appears to automate the whole process. I haven’t had a chance to test yet, so it’s unclear to me whether it fixes the namerecord problems or not. If so, great, but one reason to still consider using FontForge is its ability to manually delete glyph records. Being able to drop Greek characters, accents and diacritics, ligatures, and other glyphs that aren’t typically used on an English-speaking site is handy when you have 100k+ OTF files that you’d like to embed.
Finally, a couple of related links I’ve found interesting: