@font-face rendering performance

Question

i'm building a site where we are considering to use a custom font (using @font-face) for all text on the site, not just the headers. I've already integrated a custom @font-face on another site for just the headers, which works fine, but i'm a bit worried about performance (especially rendering) when using a webfont for everything. Especially in IE, because you need this hack to fix anti-aliasing problems in IE7 and IE8.

Does anyone have any experience (or even better: test results) with deploying a large website while using @font-face for all fonts?

Update: i've been using web fonts for body text for over a year now and i've seen no performance problems.

Answer 1

@Husky,

I have been using @font-face embedded fonts for all the type for a while now and I have have not had any problems with rendering or performance.

Steve Sauders has an excellent article about website performance effects of @font-face

The clearfix hack in the article you referenced will slow down the site on all versions of IE. All the IE filters cause performance issues.

Answer 2

Using @font-face embedded font.

I had a particular font that slowed down the rendering; tiza_talk.ttf. Another font that had a bigger filesize was faster@rendering. The tiza_talk seems a 'big' (wide) font which might be the cause (idk). It was rotated text but not rotating it didn't speed it up.

Now I'm looking for an alternative font. Using another embedded font (still rotated) the loading time went from 50s to 15s..