Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry


October 21, 2009

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.

IE, version x.old

Figure: This is the era of browser WEFT was built during. Is that IE2? IE3? It’s been so long I can’t remember.

Obviously it’s Windows-only. I grabbed a copy and tried it in Windows XP under Parallels. That went well:

WEFT in all its glory

Figure: No WEFT for you. And Windows apps with images as toolbar backgrounds? So Win95.

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:

Converting OTF or TTF to EOT

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.


Figure: FontForge in all its glory.

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:

martin says:
October 21, 12h

hey, if you link to typothegue you should link to to ..
i think the pricing model is much better than the one used by typothegue…

this is no ad for typekit, i just like the service.

October 21, 16h

Thanks for the writeup Dave. I’ve quickly become a big fan of Font Squirrel’s generator - it has evolved to allow subsetting and it now generates WOFF fonts (more on WOFF: I recently used it to produce and the .eot worked great.

October 22, 18h

Thanks for the mention. Yes, the Font Squirrel @font-face Generator does take care of the name issues but I am still working on it, as fontforge is choking on the really large fonts like DejaVu Sans (5000+ glyphs!). The subsetting feature is mildly simplistic, but fairly intuitive. Any feedback is always appreciated.

Chapolito says:
October 24, 14h

thanks for this article, I’ve been struggling with this all for a while. Goodbye WEFT and hello Font Squirrel’s generator! I just used it with great success. Finally I’ve got beautiful fonts throughout my site.

November 02, 05h

Fontsquirrel seems to work, but so far the fonts I tested (Museo Sans and Fontin Sans) look like absolute garbage on PC - no matter if IE, FF of S…

November 02, 11h

WEFT seems to work just fine in Windows XP on VMware Fusion for the Macintosh. I haven’t tried it in any of the other Windows emulators, though.

Ruana says:
December 04, 05h

Hi Dave,

I tried WEFT on XP Pro some months ago and encountered the same problems as you did.
How to force MS to finally do the job and give us a working (!) solution? Certainly not by still fussing around with the 2003 (I choked when I saw this on the Microsoft site) WEFT program. I remember back in the late 90’s I had to create font-files for Netscape using the sofware from Bitstream and for IE with WEFT - it was an absolute pain in the ass.

Right now I think for Webdesigners it’s best to stick with Cufon or Typeface. I must have cases the following @font-face implementation method (including eot files) should work:

@font-face {
font-family: ‘Font Name;
src: url(‘fontname.eot);
src: local(‘Font Name Regular’), local(‘Graublau Web’),
url(‘fontname.otf’) format(‘opentype’);
There are a few web sites which offer eot files or eot conversion. However, I think it’s best to avoid it whenever possible. We shouldn’t support the ways of Microsoft.

BTW, I recently finished your Zen Garden Book on CSS Design. And still learned a thing or two…. ;-)). ~ Ruana

Anthony P says:
February 07, 09h

Thanks for the article Dave, I believed the Font Squirrel’s generator does take care of the name issues and WEFT works just fine in Windows XP on VMware Fusion for the Macintosh.