What Is A System Font Stack?

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-systemOS X (10.11+), iOS (9+)
BlinkMacSystemFontOS X, Chrome
Segoe UIWindows
RobotoAndroid 4.0+ (Chrome OS)
OxygenLinux, KDE
UbuntuLinux, Ubuntu
CantarellLinux, GNOME
Fira SansFirefox OS
Droid SansAndroid (until version 3.2)
Helvetica NeueOS 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!

scott hartley

About the author

Scott is a web performance geek, lover of all things coffee, and avid video game player. His WordPress work delves into web performance, web security, and SEO.

4 thoughts on “What Is A System Font Stack?”

  1. 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

    Reply

Leave a Comment