Screencast: Converting OTF or TTF to EOT

In case you hadn't noticed the lovely titles on this page, they're League Gothic. Well, they should be if you happen to be using the latest version of Firefox, Safari, or Internet Explorer. However, it took much trial and error to figure out exactly how to get there. There are a number of pieces to the puzzle but in the end, I got something to work. The assumption here is that you are on a Mac (as I am) but I believe these tools work the same on PC.

First up is FontForge. FontForge is an open source font editing and conversion application. There's a command line version but I highly recommend getting the full-blown desktop app—if only because that's what I did! There are pre-built packages already done for the Mac. You may need to install X11 in advance of installing FontForge but it's been awhile since I installed it and I honestly can't remember if or how I did.
From within FontForge, you can open up an OTF or TTF file, make any changes and then generate a font in the format of your choice. In this case, it'll be a TrueType font. Now, you might think you can go ahead and take that TTF and run it through a program like WEFT, Microsoft's ancient Windows-only TTF to EOT conversion application. Except I couldn't get it to work. It locked up every single time. You may think that a TTF2EOT conversion should work and it may. It didn't with any of the fonts I was trying to work with, though.
After finding an article that discussed some additional properties that need to be defined, I realized that FontForge can be used to define those settings. Go to the Element menu and select Font Info. From there, choose TTF Names from the left side. The first step is to delete any of the existing properties on this screen. They'll be in black. The red ones can't be deleted. Then, create a new item. You'll need to create 3 new items, in fact. Make sure to always select "English (US)" as the language. Then choose the first, second and fourth items from the list. The first item is your font name, the second item is your font style and finally, the fourth item is the font name and font style separated by a hyphen.
Once you have completed the conversion, you need to convert the TrueType font into an Embedded OpenType format. That's a file with an EOT extension and the format that Internet Explorer needs. You can use the TTF2EOT command line tool or use an online tool (or an alternative) that can do the conversion for you (I use the online tool).
You should now have two files: an EOT and an OFT or TTF. I highly recommend you check out Paul Irish's Bulletproof @font-face implementation for more details but here it is in a nutshell.
@font-face {
font-family: 'Graublau Web';
src: url(GraublauWeb.eot);
src: local('Graublau Web Regular'), local('Graublau Web'),
url(GraublauWeb.otf) format('opentype');

The font-family name is a unique name that will be used when defining a font-family elsewhere in your CSS. Then, just specify the EOT format for IE; the local format, in case users might already have the font installed (and to prevent IE from trying to download the OTF/TTF); and then specify the path to the OTF or TTF file.
The Future
Font embedding is still early days but, given the right font with the right licensing, you can create a fantastic experience for your visitors.