@font-face rendering performance

views:

answers:

+1 Q:

@font-face rendering performance

Hi, 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?

+1 A:

@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: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

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.

Chris_O 2010-09-04 06:12:55

Thanks Chris. I've already read the article by Steve (multiple times :), but it isn't very specific about rendering performance for large blocks of text. I'm just wondering if using the IE hack for large body text won't slow down IE so much that the site's performance will be intolerable.

Husky 2010-09-07 14:56:25

The IE filter hacks cause serious performance issues. If your using a good properly kerned web font you shouldn't have any problems. I am using FF Meta for the body text on my site: http://c3mdigital.com and on another: http://wp-performance.com and everything renders fine in IE.

Chris_O 2010-09-07 16:53:12

I'll just try it out then. We're using Meta as well for body text, so at least i know with that font it's possible :)

Husky 2010-09-10 08:58:42

ansaurus

tags:

views:

answers:

@font-face rendering performance

related questions