CSS3’s fonts module contains @font-face, an easy-to-use mechanism for using custom fonts on web pages. It’s ready to use in all major browsers, except for their differences in font file format support. Linking directly to OpenType or TrueType fonts in your @font-face rules only works in non-IE browsers. You have to serve Microsoft’s proprietary EOT format to IE.

Microsoft provides a tool called WEFT for creating such files. While WEFT might be sufficient for many users, Windows plays no role in my web development toolchain (with the exception of VMs for IE testing, of course). And, frankly, I’ve found WEFT’s GUI to be confusing and unusable. I need to be able to create EOT files under sensible operating systems like, say, FreeBSD.

If you have TrueType (.ttf) files for your desired font, you can use ttf2eot—a simple command-line tool, whose code was extracted from Google Chrome—to generate EOT files. Kudos to Truex for alerting me to this tool. You can install ttf2eot via MacPorts (thanks, Ryan), or a simple make in the ttf2eot directory will generate the ttf2eot executable.

$ ttf2eot < Foo.ttf > Foo.eot

Things are a bit more complicated if you have OpenType (.otf), not TrueType files. You’ll first have to convert them to TrueType. Fortunately, FontForge can do this. On FreeBSD, this is a simple install from ports:

$ cd /usr/ports/print/fontforge ; sudo make install clean

On Mac OS X, you can install it from MacPorts like so (or at least you will be able to, when bug #20085 is fixed):

$ sudo port install fontforge

Once you’ve got FontForge installed, create the following script (happily borrowed from the FontForge Scripting Tutorial). Call it convert.pe, make it executable, and drop it in your PATH somewhere.

#!/usr/bin/env fontforge
Open($1)
Generate($1:r + ".ttf")

Now, to create Foo.ttf, you should be able to run the following command:

$ convert.pe Foo.otf

You can automate all of the above steps with GNU Make like so:

%.eot: %.ttf
	ttf2eot < $< > $@

%.ttf: %.otf
	convert.pe $<

You’re now equipped to use any font (whose license permits embedding with @font-face) on your website, in an automated fashion, in all major browsers.

Well, that’s slightly overstating it. There’s a catch. Actually, there are two catches. As describd in beautiful fonts with @font-face, Internet Explorer only recognizes the font-family and src descriptors within @font-face rules, so each family can only contain a single face. So you won’t be able to simultaneously use the regular, bold, and italic variants of the same face on the same page, like you can with WEFT. Also, you can’t just put a url(foo.eot) rule in your existing src setting. It doesn’t understand format() hints and will ignore any @font-face rule containing these hints. (Emphasis mine.) You have to use a separate @font-face rule for IE. At the end of the day, your CSS will look something like this:

/* For IE */

@font-face {
  font-family: "Foo";
  src: url(Foo.eot);
}

/* Other browsers */

@font-face {
  font-family: "Foo";
  src: local('Foo'),
       url(Foo.otf) format("opentype");
}

@font-face {
  font-family: "Foo";
  src: local('Foo Bold'),
       url(FooBold.otf) format("opentype");
  font-weight: bold;
}

@font-face {
  font-family: "Foo";
  src: local('Foo Italic'),
       url(FooItalic.otf) format("opentype");
  font-style: italic;
}

@font-face {
  font-family: "Foo";
  src: local('Foo Bold Italic'),
       url(FooBoldItalic.otf) format("opentype");
  font-weight: bold;
  font-style: italic;
}

Comments

  1. Melanie Archer

    Expect some traffic spikes because I'm linking to this a lot! Great advice.

    Melanie Archer, 7 August 2009

  2. george

    thanks a million mate.

    george, 13 August 2009

  3. ttf2eot can now also be installed via MacPorts.

    Ryan Schmidt, 22 August 2009

  4. Thanks for this!

    Robert Dyson, 25 August 2009

  5. Thanks much for the post on this. I'm running into a bit of trouble and wondered if you might have some insight.

    My OTF fonts are working exactly as expected, but IE6/7/8 appears to be ignoring the embedded EOT fonts that I created with both this online utility [HTML_REMOVED] this one based on ttf2eot.

    I did find a note on this issue that hints it might be a problem with the null root string... but I don't know enough to know.

    Ever heard of someone else having this problem?

    Rustin Jessen, 2 September 2009

  6. I got the same problem as Rustin Jessen, do you have a light?

    My OTF fonts are working exactly as expected, but IE6/7/8 appears to be ignoring the embedded EOT fonts that I created with both this online utility [HTML_REMOVED] this one based on ttf2eot.

    Fábio M. Costa, 17 September 2009

  7. I'm running into the same issue. I've been successfully converting .otf to .ttf to .eot with this workflow, and from my access logs, IE is downloading the .eot font, but it won't actually display it. All I can suppose is that something is borked in the output .eot since there doesn't seem to be any tool for verify the output file.

    Anthony McLin, 18 September 2009

  8. Nico Rohrbach

    Same here. Correctly a free ttf font to eot, but it doesn't display in IE.

    Nico Rohrbach, 10 October 2009

  9. Elena

    maybe IE is looking for TrueType hinting that would be missing in your converted or free fonts?

    Elena, 15 October 2009

  10. I had the same problem like you guys. Luckily I've found a quite good utility at http://www.fontsquirrel.com/fontface/generator - now the .eot works quite well. There's also impressive amount of free fonts to grab from fontsquirrel.com, thumbs up for the lads behind it...

    Bartosz, 10 November 2009

  11. I haven't had the problems you guys have been running into; I imagine this is a problem with some fonts but not others.

    Edward O'Connor, 10 November 2009

  12. Or you can just convert the font online without installing anything http://onlinefontconverter.com

    Stefan, 23 November 2009

  13. @Stefan: The link you gave leads to one of the converters I actually tried earlier and it didn't work. I mean - this stuff outputs EOT, but at least in my case, Internet Explorer wasn't able to load the resulting file at all.

    Bartosz, 24 November 2009

  14. hi, for windows what i have to use to convert fonts

    Jegan, 17 December 2009

  15. I'm not sure what they're doing differently (I'd love to be able to script this on my own dev machines and not rely on online services) but every font that I couldn't get working with this method has worked beautifully using the form at http://www.fontsquirrel.com/fontface/generator

    Anthony McLin, 18 December 2009

  16. Nad Romano

    i found that the problem of EOT font not correctly viewed in Internet Explorer isn't in the conversion tool used but in the NAME used in the "font-family:" statement after @font-face statement.

    For example, i used ttf2eot to convert the ttf fontv"called" Blackout (availablehere) and i wrongly assumed that it's name was Blackout, then Explorer didn't work. I used fontsquirrel as suggested thinking in a conversion problem, and noted that the generated statement in CSS was:

    font-family: 'BlackoutMidnight';

    and NOT that i used:

    font-family: 'Blackout';

    so i simply replaced this statement with the correct one WITHOUT changing the .eot generated file from ttf2eot, then Explorer works fine.

    Hope this tip maybe useful...

    Nad Romano, 12 June 2010

  17. Tomdkat

    Thanks for the info on creating EOT files! I'm a Linux user and I like the idea of using make to convert TrueType or OpenType fonts to EOT fonts. :)

    Tomdkat, 7 July 2010

  18. This is awesome news, WEFT is a nightmare to use. I'd like to see if I can use ttf2eof on windows, saves me booting up linux :p I like linux but sadly have become accustomed to Photoshop and Dreamweaver

    Alexis, 6 August 2010

  19. Responding to Nad's tip above,

    This will sound crazy unlikely, but I found the opposite to be true.

    Removing the hyphen webfont from the actual eot file name broke things. but changing the font declaration name to something shorter was just fine. Very weird. Try it.

    Matth Jenks, 14 October 2010

Add a comment

Posting...