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 darn good as they match the OS, and no download time required! They are used by GitHub, Bootstrap, Medium, Ghost, Booking.com (read their system font story), and even your WordPress dashboard. In my personal opinion system fonts look slightly better on MacOS versus Windows.
System fonts are nothing new. In fact, Medium has been using them since 2015. They feel just like your OS because they are using native fonts. Many of the modern operating systems choose fonts very wisely and all have a very sleek look and feel to them. It’s not like defaulting back to a web safe font of Arial or Times New Roman… nobody likes those anymore.
And best of all, system fonts work just like web safe fonts, in that they don’t require any download time by the browser. This can help reduce the overall page weight on your website. As of April 2017, web fonts on average make up around 4% of a total website’s weight. While this is not huge, remember every little optimization you make adds up to a speedy website.
System Font Stack CSS
With the font-family property with web fonts, you typically have your primary font and one or two fallback fonts. With system fonts, you have to include all of the different operating systems, and therefore you have to stack quite a few more fonts. This is why it is called a “system font stack.”
For example, here is how CSS might appear with a web font.
font-family: "Open Sans","Helvetica Neue",sans-serif;
And here is how a system font stack might look.
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
Did you know your WordPress dashboard uses a system font stack? Here is what they are using.
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
CSS-Tricks also has an alternative method on how to apply system fonts using @font-face.
System Font Stack Cheatsheet
So this is where you have to choose which setup you want. Here is a list of which fonts go with each operating system. Note: This changes over time, so you might need to revisit your fonts as new operating systems come out. I will make sure to keep this list updated.
| System font | OS |
|---|---|
| -apple-system (San Francisco) | iOS Safari, macOS Safari, macOS Firefox |
| system-ui | macOS Chrome, Windows Chrome (new versions) |
| BlinkMacSystemFont (San Francisco) | macOS Chrome |
| Segoe UI | Windows Vista and newer |
| Tahoma | Windows XP |
| Roboto | Android, Chrome OS |
| Oxygen / Oxygen-Sans | KDE |
| Fira Sans | Firefox OS |
| Droid Sans | Android (old versions) |
| Ubuntu | Ubuntu |
| Cantarell | GNOME |
| Helvetica Neue | macOS versions < 10.11 |
| Arial | All |
| sans-serif | All |
How to Implement a System Font Stack
I am actually now using a system font stack here on woorkup.com. I feel like I have finally found the best of both worlds. I will walk you through how I did it.
Option 1: Use GeneratePress WordPress Theme
Want to make this super easy? Just move to the GeneratePress theme, which is what I use on all of my websites. In the customizer, under Typography, you can simply select “System Stack.” And that’s it!
Option 2: Add System Font Stack with CSS
If you’re using another WordPress them, you can easily move to a system font stack with a little CSS.
Step 1
In WordPress, you will need to change the CSS on your font-family. I use MyThemeShop themes and they have an easy custom CSS panel which I use. If your theme doesn’t have this, I recommend the free WP Add Custom CSS plugin.
Step 2
I then enter the following code. This might vary per theme, but for most this should override everything. I am using the same system font stack as GithHub, except for I am adding “system-ui” as newer versions of Chrome support that. Remember, they will be used in the order they appear in the stack.
body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";} Step 3
You will also need to disable any 3rd party fonts you the have loaded from your WordPress theme. This again can vary, as each developer includes fonts in a different way. If you are using a MyThemeShop theme, you can simply open up the options/google-typography/google-typography.php file, find the following line:
echo $frontend
and replace with:
// echo $frontend;
That will disable any Google fonts from loading. If you are using a default WordPress theme you can easily use the free Disable Google Fonts plugin.
Before and After Speed Tests
And of course, I couldn’t resist. Here are before and after speed tests. Each test was run 5 times and an average taken.
Speed Test Before
Here is the speed test before, when I had Google fonts loading.
Speed Test After
Here is the speed test after, using my system font stack. As you can see, I dropped my entire page weight by about 60 KB, and got rid of three requests. One to fonts.googleapis.com and then 2 downloads for different font weight versions of Roboto. The system font stack was about 6% faster than using Google fonts.
I know a lot of sites that use 4-5 different font weights or styles, and sometimes even 2-3 different Google fonts. So you could potentially see even greater improvements than even I did.
I also moved our wpcoupons.io WordPress site to system fonts and had great results, check out this speed test below.
Summary
System fonts can be a great alternative to web fonts and web safe fonts. I still really like the look of my font, and now I know it’s not causing any load for users. Even though a lot of times Google fonts are cached locally, it’s still part of the overall page weight. Curious what your thoughts are? Have you used a system font stack yet with WordPress? If so, let me know below.
Get More Stuff Like This
Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.
Thank you for subscribing.
Something went wrong.
It’s awesome, but I don’t think Adobe’s Typekit website is not going to use system fonts any time soon. 😉
It makes me wonder… is the advocation of system fonts in 2017 really going to push through with majority of websites running on system fonts.
Or are we in fact spreading the news that ‘Speed is Key’? And as majority of the web move to HTTP/2 we can scurry back to a Typographer’s dream — a Font Synergy Web?
Haha, ya system fonts goes against everything that Adobe Typekit is :)
It really depends. To be honest, a well-optimized site won’t notice too much difference if you just change the fonts. But add everything up and it can speed your site up.
HTTP/2 is awesome for parallelism, multiplexing, PUSH, etc… which definitely makes it easier in 2017 to speed up both 3rd party fonts and those you host yourself. But I couldn’t resist going with system fonts. It is just plain fast!
It’s not fast, it’s *omnipresent*⚡️
First of all thanks for this Awesome Post Brian :-)
I have some Questions regarding this post
1 – This method Work on All Browsers?
2 – It will Display the Font According to Device and Browsers?
3 – For System Font’s CSS Implementation Method is Enough?
Thanks, Santhosh.
1. Yes, this will work on all browsers. But you have to think of it more along the lines of operating systems, not just browsers. The list above is what I am using.
2. Correct
3. Yes, no fonts are required as they are already on the OS for each platform. All you need is the CSS :)
do we have to download fonts or something? or just CSS is enough I am confused lol :p
Hey Garry! It’s just CSS. The system fonts are already on the operating systems. No download of fonts required :) That is the beauty of it!
But after that I can not change the size or color of the text.
You would just need to change the font color or size with CSS.
Ok, thanks.
I am also using mythemeshop
Let me ask how do you get rid of the scroll effect and the color of your post when you move the mouse over?
I have to use css to adjust color and font size, but I have to use “! Important” to be able to apply. Do you have a solution for me?
You can either directly edit MyThemeShop’s style sheet or you will have to use !important to override their styles.
Brian nice tip – performance addicts like myself say thanks !
But doesn’t that mean you’d need to proof and test your site and it’s layout in every system/OSes to ensure they look right too ?
Hey George,
Technically yes, but I haven’t seen any major issues across all platforms.
Hi Brian. What font do you use on Woorkup? My plugin states that it is ‘Graphik Web’… But is that a system font?
Thank you…
Hey Thomas,
So I went back to a premium web font on woorkup (Graphik). Mainly due to I really dig the look of this premium font. I do still use system fonts on some of my other sites, such as https://perfmatters.io/.
Thank you for the quick reply! It’s a bit pricey the Graphik font… so i’ll settle for something else :-)
Thank you for all the great content here – have a nice day :-)
Haha ya… it was an investment :) I’m also a big fan of Nunito Sans, you might want to check that out. Free: https://fonts.google.com/specimen/Nunito+Sans
I’m about to switch to system fonts and was curious if you ever ran into any problems (even super minor ones) while using them that caused you to switch back to a web font?
Or was it entirely just a personal design preference?
Thanks for a great post, by the way.
Hey Jeff! No problems at all, just caught my eye on a certain font I couldn’t resist :) I’ve probably switched back and forth a dozen times now haha. But no problems with running a system font stack. It’s by far the fastest method out there. Go for it!