@Font-Face and Page Rendering Performance

I found an interesting article discussing the use of @font-face. Some key points are

IE doesn’t render anything in the page until the font file is done downloading if there is a SCRIPT tag above the @font-face declaration.

Although font files don’t block other downloads, they do trigger the browser’s busy indicators. This has a negative effect on the user’s perception of page speed because it gives the impression that the page takes a long time to load.

IE is a little jumpy when it comes to downloading fonts. IE starts downloading the font file as soon as it encounters the @font-face declaration. This means IE downloads the font file even if no elements in the page use the font.

The author has a good solution: put the font-file at the end of page.

I recommend deferring the font file download until after the page has rendered, as shown in the Lazy Load Test. This solves the issues in IE – the page renders and then the font is downloaded in the background and enhances the stylized text once it arrives. This technique has benefits in other browsers, as well. By lazy loading the font file, most of the browser busy indicators aren’t triggered.

Too many designers forget that page rendering is still a primary concern. Viewers are willing to wait for a page to render but their patience is limited. Delaying page rendering for 6 seconds in order to deliver custom fonts is not acceptable.