As many of you know, I am a big fan of web performance. But I also don’t think that it should or have to compromise design. There is always a good balance in the middle. The other day I was on GitHub’s blog and was really digging their font! It was super easy to read. So I dug into the properties with Chrome Devtools and saw that they were using a system font stack. So today I want to show you how to use a system font stack on your WordPress site. What is a System Font Stack?
There are different types of fonts to choose from when it comes to a website. You pretty much have four different options:
Web safe fonts: Free and no download time required by the browser, but typically look dated and therefore aren’t used a lot. See a list of web safe fonts.
Web fonts: Look beautiful, but require download by the browser. Have both free and premium options available. Adds to overall page weight of your website. However, they can be served from cached CDN. Providers include Google, TypeKit, etc.
Host web fonts locally: Both free and premium options available. Still requires download time, can take advantage of single HTTP/2 connection on cached CDN.
System fonts: Free, look pretty