Be slightly careful when using web fonts

Web fonts make it real easy to use almost any font on your website and that is good. But one thing that webmasters seem to not notice is that web font files are quite heavy and will easily outweigh the rest of an average web page.

As an examle, let's take a look at a new blog I set up recently, Fishing Base Blog. At the moment it uses WordPress' default theme which include the Open Sans font. I have added a background image (46kb) and tracking code for Piwik (21kb). The total size in kb for the frontpage is now 281.5 kb which is not bad by todays standards.

If we subtract the 67kb I added, we are left with 224kb, of which the Open Sans font takes 165kb. That means that the font files weigh in at over 70% of the total default WordPress theme. So I think that while Open Sans looks good, it's not worth all these kilobytes. With my additions, the weight of the front page will be reduced with over 50% by removing the Open Sans font. And mod_gzip is not enabled which would further shift the balance because font files are quite compact unlike html, css and js-files.

The lesson to learn is not that web fonts are bad, but that they should be used with care, and possibly avoided if having a fast website is a priority. And when setting up your web fonts, be careful to select only the font weights that you really need. This is important and easy to do when you use a web font service like Google Web Fonts.