Fonts. We love the way they look, but now how heavy they are. Google Fonts are the preferred medium for adding web fonts; and arguably have served the web well. Especially, with the introduction of the font-display property, the perceived load time of a website has never been better.
However, this is not to say, web fonts are perfect. Web fonts are still bloated beasts that need to be managed correctly. But… what if you stopped using web fonts altogether and moved solely to a system font stack? Let’s discuss what a system font stack is and the benefits of a system font stack.
What Is A System Font Stack
A system font stack is where your website is designed to rely solely on the fonts that come natively with your operating system.
System fonts have a number of advantages.
1. They don’t require any font files to be downloaded.
2. They feel native to your users operating system.
3. They are free.
Additionally, due to the lack of downloading, your font files can never be taken offline. This is beneficial because Google Fonts might not be accessible to all users, or if the service were to ever go down, there would be a number of potential issues.
So How Do I Go About Adding This?
If you are lazy, you can remove all the calls to Google Fonts from the front-end and let the system figure it out from there. Or, the better option is to integrate the styling into your CSS.
Here is a table you can use as a cheat sheet for the system font of various operating systems.
System Font (Name) | Operating System |
-apple-system | OS X (10.11+), iOS (9+) |
BlinkMacSystemFont | OS X, Chrome |
Segoe UI | Windows |
Roboto | Android 4.0+ (Chrome OS) |
Oxygen | Linux, KDE |
Ubuntu | Linux, Ubuntu |
Cantarell | Linux, GNOME |
Fira Sans | Firefox OS |
Droid Sans | Android (until version 3.2) |
Helvetica Neue | OS X (10.9) |
Now that we know what a system font stack is, we need to update the fonts to use this format. This can be done easily. However, it’s going to be slightly different depending on your theme.
h1,h2,h3,h4,h5,h6, body, p {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif !important;
}
The above code should fall-back to all system fonts for nearly every text on your website. Or as I mentioned above, you can take the easy approach and just stop calling Google Fonts, and see what happens!
Hi, how do I download these fonts or font stack?
System fonts are already preinstalled on your PC you don’t need to download anything!
Hi Scott,
may I follow up briefly here? When I use system stack, no fonts are made available from my server/website, only from local instances on the users computer? there is therefore no risk of infringing font copyrights?
Thanks und kind regards
Steve
Correct, there is no risk since the fonts don’t come from your server, and to use them you just declare the font-family to one of the fonts.