In order to use webfonts in your website you have to convert regular fonts to Microsofts EOT format. Normally I would use the online version of ttf2eot, which works reasonably well. As long if you have a TTF. If you have another type of font like a OTF, you have to find another converter first.

WEFT

In case ttf2eot fails with a particular font (like in my case) I grudgingly use Microsofts WEFT tool. I dislike WEFT for its instability and weird workflow/interface. But last time I tried it, it didn’t do a good job at all. Only 3 of the 4 fonts I had to convert to EOT were recognized and none of that 3 fonts worked in IE.

Fontsquirrel

Then while looking for a manual on WEFT, I came across the free @font-face Kit Generator of Fontsquirrel. And man, did that save the day. Uploading and converting the fonts was very easy. On top of it, you get an example web page packed in a zip with the webfonts in it. It looks something like the screenshot below. The service can also convert fonts to WOFF (Firefox) and SVG (Chrome & iPhone).

Fontsquirrel not only converts your fonts to EOT, but also shows an example how it would look like in your browser in various font sizes.

What to look out for in Fontsquirrel

The only thing that did go wrong was the hinting. If I chose the default option “Use existing hints” the letter “B” did not render well as you can see in the screenshot below. When I chose to remove the hinting, the conversion was successful.

Fontsquirrel too can get it wrong. Always check all the types

The problem in the previous piccture was cleard by removing all hints.

Related posts:

1. The trouble with @font-face
2. Test: Popular professional fonts as webfont
3. List of web fonts services and resources
4. Interview with Ethan Dunham of Fontsquirrel and Fontspring
5. Webfont pitfalls