One of the first pitfalls you can fall into when using webfonts is that you find fonts that seems nice but aren’t usable. That could be for a number of reasons:

• Huge line heights: Some (free) fonts have lots of space above and below the type. You have to give the text something like line-height: 0.8em to make it look good. But users with Chrome or old browsers will not see your website. Instead they will see lines of text in Arial on top of eachother.
• Legibility: Many fonts are only useful as a heading. That’s because font rendering on Windows is far from perfect. Especially at small font sizes. If your font isn’t readable at 11px, think twice if you want it for your body text. Please keep in mind that fonts in IE are even less legible.
• Don’t trust Photoshop: Photoshop cannot emulate the bad aliasing that can occur in browsers, so don’t comfort yourself when everything looks fine in Photoshop.
• Test in browsers: Pick the fonts you want to use and test it in different browsers. I like the free font-face service of Fontsquirrel because it not only converts the fonts to webfont format, but it also generates an HTML-file with the webfont in different sizes. Just open the page in various browsers and compare. You can check which font sizes have a good legibility. Be sure to check IE and Safari on PC because they are the worst when it comes to font rendering.
• Be wary of free fonts: I use free fonts, but you really have to pick the right ones. Some have for example problems with legibility.
• Be wary of commercial fonts as well: Users can download your fonts. So if  you use a $200 dollar font, you make it freely available. In theory you could make a new font with just a subset of the original. That would make it less desirable to download, but also less usable and it’s still not legal at all.

Conversion options

Fontsquirrel has some options when converting fonts to EOT, the only font type that IE supports.

• Hints: Hints help the anti-aliasing engine with it’s work by giving … well, uhm … hints on how to do that. Hints tell what pixel should get which color in order to create the effect of smooth lines. If your font has bad hints or none at all, you could auto generate them when converting. It can make a difference. Hinting is done fully automatic though, so you could expect glitches like having an i without a dot. Those errors occur mostly at small font sizes, so if you use the font in headings it should be fine.
• Subsetting: A font can be as small as 20Kb, but also as large as 200Kb. Multiply that number with every font style you want to use like italic and bold. My weblog loads 4 font files of +- 25Kb. For IE the font files are even larger: 4 times 70 Kb. You can limit the file size by removing all the types you won’t use like Arabic or Chinese.

Setting up the font-face right

• The right @font-face syntax: Writing the font-face code isn’t hard to do. But what you really need to be sure of is that it works good for all browsers. After I implemented webfonts in this blog, I discovered that Firefox loaded both OTF and EOT files, although it doesn’t even support EOT! Paul Irish has a nice article about the various font-face options and concludes that there is only one good syntax. That’s the one below:
  @font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.otf') format('opentype');
}
• Cross domain webfonts: I discovered that Firefox is pretty fussy when about the location of fonts. This can save you an hour of frustration.

Of all the errors I made, the biggest one was the idea that you can grab any font, use it in your website and be sure that it renders like you would expect in Photoshop. It just doesn’t. There aren’t much fonts that render well at 11 to 14 pixels.  This blog used the font Fontin Sans for all text. Now I scaled it down to just the logo and the major headings. All other text is “just” Tahoma/Geneva.

Related posts:

1. My favorite for converting fonts to EOT
2. Test: Popular professional fonts as webfont
3. List of web fonts services and resources
4. The trouble with @font-face
5. No sign of @font-face in Chrome 4