@font-face and website performance

Posted by Sheldon Finlay on July 07, 2009

graublauwebteaser@font-face has been riddled with shortcomings making it less than ideal for real world applications. But with most A-grade browsers now supporting the CSS specification, it seems it’s time has come.

One golden rule in web development is to keep HTTP requests to a minimum. Each additional HTTP request slows down the delivery of the web site and adds additional burden to the server.

@font-face basically allows you to embed fonts so they can be rendered on the page. Mind you, font files typically are not small. Graublau Sans Web, a popular free OpenType font for the web is 44kb and if you want to use the bold variant too, that will cost you another 44kb. Maybe you want a couple more fonts for your design. It’s going to cost you in the form of HTTP requests and download bloat. This might be fine for a low-traffic blog, but a high traffic site serving thousands of request a minute would not want to add fonts to their burden.

One possible solution would be to have all the freely licensed fonts hosted by a reliable CDN. Maybe Typekit is planning this, I don’t know. Reliable is the operative word. Google has set the precedence with their AJAX Libraries API. Basically Google hosts all the common JS libraries like jQuery, Scriptaculous, etc. Developers then link to Google to pull the code into their sites. The advantage is a faster experience for users visiting websites that use Google’s API on their site thanks to caching. See if a visitor visits my site and I am using the Google JS link for jQuery and then they visit your site and you have the same Google JS link for jQuery, the visitor doesn’t have to download the same exact Jquery file twice. They just download it once from Google.

It seems this same practice could be applied to @font-face and font embedding. If Google hosted a dozen common web fonts and we could all link to them in our stylesheets, it would make @font-face a lot more elegant and faster. Whether Google would be up for the task is anyone’s guess. But I am keeping my finger’s crossed.

Trackbacks

Use this link to trackback from your own site.

Comments

Leave a response

Comments