Web fonts in 5 easy steps

In my previous post, I wrote about system fonts and their advantages over web fonts. I encouraged a ‘system fonts first’ approach, arguing that, compared to system fonts, web fonts (a) can negatively impact performance, (b) use more data, and (c) increase your site’s energy consumption. But a web without web fonts would be a far less interesting one — maybe by using web fonts a little more responsibly we can get all their benefits, while minimising the disadvantages.

In part one of this guide, I’m going to cover the five methods for improving web font performance that I think offer the greatest gains for the least effort.

Credit goes to Zach Leatherman, who has written at length about web fonts on his site. All of his articles are worth reading, especially The Font Loading Checklist and A Comprehensive Guide to Font Loading Strategies (which is indeed very comprehensive), both of which came in very useful while I was putting this post together.

In this post, I’m going to be using two terms that are often used interchangeably but which traditionally refer to different things:

Leave a Comment