Website performance: impact of web fonts

Although it was possible to embed fonts in web pages even during the dark ages of the internet, 2010 was the year when the pieces of the web typography puzzle really fell into place, Designers, Marketeers and especially “brand identity guards” are ecstatic about this evolution.

But there’s little to be found on the performance impact of web fonts. Because you’re downloading extra files, so there must be some impact, no? I created 4 identical pages; one without non-browser-native fonts, one with Cufon (which I already knew I wasn’t fond of), one with the hosted Google Font solution and one with local fonts (from fontsquirrel.com). Those 4 pages were analyzed by webpagetest.org (3 runs on IE8 from the Amsterdam node). These are the results:

doc complete (s)# requestsdownload size (Kb)diff with basic (s)full testresult url
basic1.50721135-http://www.webpagetest.org/result/110106_1Y_7S9K/3/details/
cufon2.452261760.95http://www.webpagetest.org/result/110106_F8_7S9P/1/details/
webfont (local)1.807231890.30http://www.webpagetest.org/result/110106_V3_7SBD/1/details/
webfont (google)1.771231620.26http://www.webpagetest.org/result/110106_S4_7SM2/3/details/

As was to be expected and confirmed in the Google Webfonts FAQ, even the fastest method (hosted Google Fonts) is 0,26s slower then the version without web fonts. Locally hosted fonts are marginally slower, but that’s because (for reasons I don’t fully understand) 2 font-files were loaded instead of only 1 in the Google Fonts-powered page. Cufon isn’t really worth mentioning here, it’s dead-slow and has become rather irrelevant I guess. I did not test a version with images instead of web fonts, but that would probably yield approximately the same result (5 image files, each somewhere between 4 and 8Kb?) and is sub-optimal form a SEO and accessibility point of view.

So 0,3 seconds, that’s not too bad, no? Or is it? If you’re creating an online shop, Amazon’s experience might be of particular interest here; every 100ms delay costs them 1% in sales. So are you willing to lose 3% revenue just to have those nice fonts, which your visitors probably couldn’t care about less?

My advice; don’t use web fonts if you value performance. And you should consider performance a top priority, not just for sales’ sake, but because raw website performance also impacts usability and search engine ranking.

If your brand identity manager insists on using the right fonts, performance be damned, then try to at least follow these basic best practices:

  • have the CSS that defines your fonts (with font-face) as early in your HTML as possible and  certainly before any script is loaded
  • use Google’s hosted font-solution if possible; it’s fast, the CSS is optimized for the browser that requests it and there’s a lot of free fonts at your disposal
  • if you have to host the fonts yourself, make sure to serve the WOFF format (the new standard) and SVG (for iPhone/iPad) next to the more traditional TTF (the “old” standard) and EOT (for MSIE)
  • if you’re hosting your own fonts, configure your webserver to on-the-fly compress ttf, svg & eot-files (woff-files are already compressed) and set expire-headers for all fonts in the far future to allow optimal caching (example for Apache):

AddType font/ttf .ttf
AddType font/x-woff .woff
AddType image/svg+xml .svg
AddType application/vnd.ms-fontobject .eot
ExpiresByType font/ttf “access plus 30 days”
ExpiresByType font/x-woff “access plus 30 days”
ExpiresByType image/svg+xml “access plus 30 days”
ExpiresByType application/vnd.ms-fontobject “access plus 30 days”
AddOutputFilterByType DEFLATE font/ttf application/vnd.ms-fontobject image/svg+xml

6 thoughts on “Website performance: impact of web fonts

    1. frank Post author

      I’m sure you don’t Rushan, but compare your site with and without webfonts m in a tool such as webpagetest.org and the performance difference will be very clear. But it’s a trade-off between performance and aesthetics only you, as site-owner, can make.

      Reply
      1. Jeffrey Schimsky

        What is missing from this page is information about licensing and the increasingly nickel-hungry font purveyors… This is their new revenue machine (I know that Google’s service is free, but most of the others aren’t–and they are the only way to get some of the more traditionally useful faces). The big thing that Font-as-Service does for us? Licensing is handled. No charge for embedding (Flash, pdf, etc.), no extra charge for tablet embedding, etc.

        I agree this is a branding/SEO conversation–but this licensing nightmare being removed is also HUGE!

  1. Chris Thompson

    This is an interesting study. However, one factor which will differentiate your test results from real-world results is caching.

    As Google’s Web Fonts become more popular, for example, there’s an increasing chance of a user already having any particular web font in their cache. In that case page load time won’t increase at all.

    Likewise, any user who visits more than one page on a site will only suffer the slower performance caused by downloading a web font on their first page view. Repeat visitors to your site will also benefit from having the font cached.

    Reply
    1. frank Post author

      Hi Chris; I agree that caching can play a significant role for the 2nd pageview and beyond, but I consider “the increasing chance of a user already having any particular web font in their cache” a bit too optimistic.

      Browser cache is known to have its flaws (cache size being a prime reason) and given the fact there’s 500+ fonts on Google Web Fonts, the chance of a user happening to have your specific font in cache on first pageview, seems pretty slim.

      Reply
  2. Pingback: Производительность веб-шрифтов | Фрилансер Кирилл Куликов

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>