@font-face is all the rage in the CSS world these days and I’ve been dying to give it a whirl. This entry won’t discuss the best practices in terms of CSS syntax or the ins-and-outs of @font-face; that has been done in numerous other places which I will link to at the bottom of this entry. I’d rather focus on a specific Windows-related issue.
Microsoft, why dost thou hate us so?
Once I got started messing with @font-face I soon found out, like most things in web design, Internet Explorer does not make our lives easy when it comes to this new feature. Of the browsers that currently support @font-face IE is the only one that doesn’t support .ttf or .otf files, you know, like every other browser that supports @font-face. Of course, it only supports the .eot format designed by Microsoft itself. :-P
Microsoft provides a program called WEFT to convert your .ttf files to .eot but (big surprise) it’s super clunky and on my computer it kept crashing every time I tried to create a font database. Undaunted, I knew there was a better way.
Note: If you’re trying to convert an .otf file to .eot you must first convert your .otf file to .ttf. I know, hassle right? I’ve read that FontForge is great for this process but haven’t tried it yet. If I do I’ll write another article about how that goes.
Enter ttf3eot, an open source utility to convert .ttf to .eot (hence the name). After reading the Wiki page I found that the utility is primarily a UNIX-based utility but they offer a Windows version. So for our purposes we need the zipped up Windows Executable. Extract the .exe to the desktop and you’re almost ready to go.
Now you certainly don’t have to do this, but it helps me stay organized. Chances are you’re going to have to reuse this file again so why not set yourself up for the future? Here were my steps:
- Make a folder on your desktop called “Web fonts” or whatever you want and drop the .exe inside.
- Next, copy a version of the font you want to convert into the new folder.
Now you’re ready to run the .exe.
Bring up the command prompt by clicking Start >> Run… >> type
cmd and hit “Enter”. The syntax for executing the file is as follows:
C:\>ttf2eot.exe C:\OLD-FONT.ttf C:\NEW-FONT.eot\
Now if you’re working within your new Web Fonts folder you’ll have to make sure you set your path down to the folder it’s sitting in. My command looks like this:
C:\Documents and Settings\rollinsj>Desktop\Web Fonts\ttf2eot.exe C:\Documents and Settings\rollinsj>Desktop\Web Fonts\OLD-FONT.ttf C:\Documents and Settings\rollinsj>Desktop\Web Fonts\NEW-FONT.eot
Note: Obviously your paths will be different than mine so take note of where you’re pointing. Especially be sure to watch where you’re placing your new .eot file. There’s no notification that the process has run so getting the path right is important.
Hit “Enter”. If all goes well the conversion should be instantaneous; at least it was on my computer. Now you’ve got your .eot file so IE can be happy!
There are tons of great entries about @font-face out there. Topics run the gamut from performance to best practice syntax. Here are some of my favorites:
- @font-face in-depth
- Becoming a Font Embedding Master
- Bulletproof @font-face syntax
- @font-face and performance
What other problems have you all come across with @font-face? Do you hate it all together? Is there a better way? Let us know in the comments.