Using System Font Stack on your Website

If you are looking for a way to boost your website or WordPress performance and speed, then one thing you could do without much effort (and no compromise on design) is to use system font stack. As the name itself suggest "system" fonts are the default fonts used by a particular operating system. As its already present in your OS, the web browsers or mobile browsers do not have to download any font files. It just renders with the one it already has by default.

To build up your confidence a bit for using system font stack on your website, take a look at some of the popular high-traffic websites - Github, Booking.com, Bootstrap and Ghost. Even our beloved WordPress admin dashboard uses system fonts. Also, read this wonderful article from Booking.com on their journey of implementing system fonts.

Get to know about System Font Stack

There are web-safe fonts (which are old and outdated), Web fonts (like Google Fonts and Adobe Typekit/Adobe Fonts), self-hosted web fonts and finally, system fonts. Other than system fonts, all other types of font stack require some downloading by the browser.

System fonts are first-class citizens on their OSes. They are beautiful, well optimised and exceptionally designed for modern-day, high-resolution screen usage. Like, the San Francisco font present in macOS and Roboto font in Android OS. These fonts load instantly on a browser as they don't require any downloading time.

• System fonts are the default fonts of a particular operating system.
• They are like web-safe fonts but designed for modern-day, high-resolution screen usage.
• No download required by the browser to paint your website text.
• Feels just like your OS.

Did you know? Web fonts on an average take up around 5-7 per cent of a typical website total weight. It seems to be small, but every small optimization counts towards your overall website speed and user experience.

Before getting into how to use the system font stack on your website or WordPress, you should also know some negatives (small bug) of using them. As these fonts very much depend on the browsers builds, sometimes they mess up. Recently, Chrome 81 web browser on macOS broke the bold weight of system font stack. It got fixed in the subsequent Chrome 83 version. But, for a short period of 1-2 months, any website using the system font (especially using the bold weight for headings and text bold) looked plain or weird without any boldness applied.

System Font stack per OS

Here is a simple chart of different system fonts found in each operating system. Do note that they tend to change (less frequently) when a new version of an operating system comes out. So make sure to keep a check on your websites system font stack.

How to use System font on website and WordPress

Generally, in the font-family property, we stack up the fonts in their order like the primary font and one or two fallback fonts. Similarly, when using system font stack, we stack different fonts for the different operating system. Let's look at a typical example of system font stack used in a website :

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

This would look complex, but actually, we are asking Safari, Chrome and Firefox on macOS and iOS to render San Francisco or -apple-system and BlinkMacSystemFont (or system-ui in newer macOS), all browsers in Windows OS to render Segoe UI and browsers in Android and Chrome OS to render Roboto.

Oxygen font targets KDE, Ubuntu targets Ubuntu OS, Cantarell on GNOME, Fira Sans on Firefox OS and Droid Sans targets older Android OS. We are adding rest of the font stack to make sure, older and less popular operating systems would also render our website text correctly in their browsers.

Enough talking, get to the snippet. So, here is the best and full system font stack that would render your website text accurately on any operating system.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Approach 1: adding System Font directly to Elements

Here we are adding system font directly on the CSS element using font-family property. It is the same approach used by Github, Medium, Booking.com and others.

/* System fonts on body element */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Ther are other variations of system font you could also try. Most of them have a slight variation from the above code, as they add/drop support for older and less popular operating systems.

/* System fonts used as in Github */
body {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}

/* System fonts used as in WordPress dashboard */
body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

/* System fonts used as in Booking.com */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

In WordPress, you could add the same code to the "Additional CSS" option under theme customizer (WordPress dashboard > Appearance > customise).

Some times you may also need to add the same system font to the headings (h1, h2, h3, h4, h5, h6) and paragraph elements.

h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
P {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Or, all of them together as */
body, p, h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Approach 2: declare system font using @font-face

Sometimes, using the system font directly on an element would make it messy to manage (on newer updates) and bloated. As an alternative, you could declare these system font stacks using @font-face. The advantage here is that you could define the system font stack once and use it anywhere using font-family property. Thus you could get rid of using the long list of fonts in a different part of your CSS.

Here is a sample from the awesome project by Jonathan Neal, that lets you define System Fonts in @font-face once and then you can use it easily under font-family anywhere.

/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */
@font-face {
    font-family: system-ui;
    font-style: normal;
    font-weight: 300;
    src: local(".SFNS-Light"), local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

/* Applying the fonts to an element */
body {
  font-family: system-ui;
}

Do check the original snippet from Jonathan Neal Github code to add italics, bolding, and additional weights in the system font.

Disable Google Fonts, Adobe Fonts, Local fonts

Once you have implemented the System Font stack on your website we could and we need to remove or disable any Google Fonts, Adobe Fonts/ Typekit, Local fonts added to your website.

These web fonts are usually added to your CSS files (@import or @font-face) or as a link tag or script tag in HTML to your website header/footer. You could comment it out or remove them entirely.

If you are using WordPress, then it's easy peasy as there are lots of plugins that would help you to remove or disable Google Fonts from loading on your website. You could try the free "Disable and Remove Google Fonts" by Fonts Plugin.

If you are looking to further improve the speed of your WordPress website, along with disabling Google Font, then try the premium Perfmatters plugin. It’s a lightweight WordPress performance plugin that can reduce HTTP requests, strip out unwanted/unused code, and minimizing back-end load.

Hey, TutorialForest is not using System Font are you? We are using Nunito, Google Font (based on our designer's recommendation) but they are loaded through various optimisation flows with the help of Cloudflare workers.

We will soon publish an article on optimising Google Fonts, Adobe Fonts/ Typekit for websites and WordPress for those who still prefer using them.

Update: We have removed "system-ui" from the font-family stack, as "system-ui" depends on the version of the current OS, but the language of the OS as well (majorly i18n issue in Windows OS). This causes unexpected behaviour with the font size and weight.

Major websites like Github and others (even Bootstrap) have removed system-ui from their font-family stack.