How and Why We Moved To A System Font Stack in WordPress With No Regrets

Table of Contents

We moved ServerWise.com to a system font stack a year ago. We severed all ties with Google Fonts and haven’t looked back. 

It’s nice to know we’re in good company. Booking.com, GitHub, Medium and Unsplash are all running on system font stacks and have been for several years now.

What happened? Our site speed increased by nearly 6%. That may not seem like much, but it adds up, and it matters especially to those viewing this site on mobile phones and on slower internet connections.

The Four Font Options

Let’s take a quick look at the four font options you have to choose from:

Host Web Fonts Locally: You’ll have a slightly superior speed, and you can still choose from any web fonts you want, including custom premium fonts, Adobe and Google. The catch here is that the fonts still require download time, and if you have a popular site that could mean hundreds of thousands of 200kb downloads a day.

Web Fonts: Beautiful typography with nearly unlimited choices from Google, Adobe (TypeKit), and Font Squirrel. These fonts must be downloaded by the browser via a heavy JS script which adds to the page weight and decreases your page load speed, especially on mobile devices.

Web Safe Fonts: Doesn’t require download time but are considered a legacy font class meaning they look old and are rarely used. Imagine reading this article in Times New Roman. No, thank you.

System Fonts: So-called because they’re already present on your system as part of your native operating system. They’re attractive, and you’re accustomed to them because they are all over your computer, tablet or mobile. The best part is that no download is required and your page load speed is unaffected.

Advantages of Using System Font Stacks

More font weight options. This may not sound exciting to you but, trust me, it is. WordPress includes two font options – normal and bold. A few of the WP page builders, primarily Elementor, gives you more options built in (400, 500, 600, and so on). But those options come at a price because they add the extra command to your font style. If you vary the font weights throughout a long page or post, and you’re using Google Fonts, some users on mobile will have a noticeably slower page load time. A system font lets you add variations such as light and heavy as additional options without weighing down your page.

No downloads. You only serve up the base instructions of your preferred fonts on each device. The user’s own operating system supplies those fonts. 

No JavaScript call or API. The Google Fonts API, JS and the Web Font Loader deliver beautiful font types, at only the cost of your site speed. We removed all Google Fonts. 

Getting Real About Google Fonts

Let’s get real about Google Fonts for a moment. Great idea and we’ve all used them, but the Google Fonts API has low priority. It’s a free service, so we get what we pay for, as is usually the case. The Google Fonts API loads at sporadic speeds and at times is offline altogether meaning your fonts look terrible. 

Switching to a system font stack means no more Google Fonts dependence. In fact, you’re not dependent on any service or server to deliver crisp, clear font classes to your site.

Things You May Not Know About Google Fonts

Google fonts load at different speeds.

That’s right, it’s been tested and retested, and it’s true. If you’re using three different Google fonts on your site for headlines, lists, body, etc. those fonts are loading at different rates. The kind folks at KeyCDN tested and compiled the results.

Load Speed Test on Top Ten Google Fonts Graph
Source: KeyCDN

Not everyone can see them equally.

Google fonts, like web fonts, appear differently based on the browser and operating system and connectivity. If your site visitor is out of India and viewing your site on a 3G connected mobile using the Chrome or UC Browser that visitor will have a different experience than a US visitor on a high-speed connection with a Windows-powered laptop. 

Google’s servers can be erratic.

We’ve experienced Google Font API and CDN load time fluctuations from 122ms to 641ms per font style, within the space of three minutes. For all its server power and many data centers Google prioritizes resources to its money-making services and not its free developer tools. I can’t blame them there.

Google fonts are render blocking (paint times).

A web page’s HTML must be fully parsed before it can be painted or loaded into the browser. Stylesheets, as helpful as they are, block this by forcing the browser to load them fully as well. Because Google fonts (and TypeKit and Adobe for that matter) are called by CSS their downloading delays browser parsing (paint times). 

We’ve experienced Google font load time fluctuations from 122ms to 641ms per font style, within the space of three minutes. 

SSL handshakes affect site speed.

We all know that Google prefers SSL sites when it comes to SEO and placement on a search engine results page (SERP). In order to use SSL (and everyone should) an extra layer of encryption is added to the connection meaning two additional round trips to establish the secure connected in the browser. 

Google fonts are also called via HTTPS which adds two more handshakes to your page before the page is fully rendered and secure. This slows down your first contentful paint scan thereby slowing your site load time.

What Exactly Is A Font Stack?

A font stack is the preferred order of fonts listed in a site’s stylesheet for each browser and operating system. You most likely already use some variation of a font stack in your stylesheet in the event that the preferred web font can’t be downloaded due to a timeout (3-second rule) or other reason. 

A typical font stack may look like this:

font-family: 'Roboto', serif;

In the example above if Roboto is not present it tells the user agent to select a serif font as a fallback. 

It’s simple, and it works great, but not across all operating systems. If the user doesn’t have the font installed or available, it may choose an unrelated font, giving your site an unpleasant makeover. This may leave your site visitor with an unintended impression of your brand.

Now, some web designers compensate for this possibility by including more fallback options:

font-family: 'Roboto', 'Garamond', 'Arial', 'Helvetica', serif;

In the example above, the CSS specifies the exact order of the several fallback options. The stylesheet has stacked the preferred order of the font.

A system font stack is the same but with a core addition – it also specifies the operating system to ensure the perfect match of font to display. Roboto looks great on Android and Chrome, but not on iOS. System font stacks take the control you had from the above font stack example and adds an extra layer of control – the operating system itself.

Here’s what the system font stack for Bootstrap.com looks like:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

You claim total unapologetic control of your site, and you ensure it looks its best on every device and operating system.

CSS stylesheet to speed up your site and optimize site load time

System Font Chart

The following is the current font for each operating system, guaranteed to look its best. This can change with operating system updates, so check your site on other OS and check back here occasionally. I will keep this list updated.

Operating System & Device
Font

ALL

Arial, sans-serif

Android, Chrome OS

Roboto

Android (pre-Ice Cream Sandwich)

Droid Sans

Firefox OS

Fira Sans

GNOME

Cantarell

KDE, Linux

Oxygen / Oxygen-Sans

iOS Safari, macOS Safari, macOS Firefox

-apple-system (San Francisco)

macOS Chrome

BlinkMacSystemFont (San Francisco)

macOS Legacy

Lucida Grande

macOS versions < 10.11

Helvetica Neue

Ubuntu

Ubuntu

Windows Chrome

system-ui

Windows Vista and newer

Segoe UI

Windows XP

Tahoma

3 Ways To Implement A System Font Stack

As with most things in life there’s the lazy but fast way, the technical way and the WordPress way.

Delete & Hope: The Lazy Method

This method is fast and easy, but unpredictable. Just delete all calls to Google Fonts in your pages and hope for the best.

This may mean commenting out the fonts.googleapis.com line in your functions.php file. Or remove @import from your stylesheet. Or simply delete the call in your header to Google Fonts.

Once done every operating system will have to figure itself out. Hope it does it the way you’d prefer.

CSS

To replace your stylesheet directly, just go through your CSS and replace all font-family lines with your new system font stack.

GeneratePress

If you’re using the GeneratePress theme (ServerWise clients receive this premium ultrafast theme for free) switching to a system font stack could not be easier. 

Click into the Customizer and select Topography and System Stack. You’re done!

GeneratePress makes it easy to switch to a system font stack

WordPress

You can use the WordPress Customizer to override the font-family with your new system font stack.

How to use WordPress Customizer to switch to a system font stack

Use A Plugin

If your theme is a little complicated, or you’d rather not risk any code changes, you may find the Disable and Remove Google Fonts plugin helpful. It does exactly (and only) what it says, and it does it well.

System Font Stack Examples

I’ve included a few of my favorite system font stack groupings to make the transition easier on you. Do with them as you wish!

Booking.com

font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

Bootstrap.com

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

GitHub

font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

ServerWise

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Unsplash.com

font-family: -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;

Vercel

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

WordPress.org

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Switching to a system font stack made ServerWise load faster (even on our already fast optimized servers) and still looks great on every screen. 

Now switching over your site shouldn’t take more than a few minutes – 7 minutes at the most in my opinion because I laid it all out for you.

To get started, just copy one of the several system font stack examples I included above and replace the necessary elements in your site according to my simple directions. A few minutes later and your site wide transition to total efficiency is complete.

Of course, if you’re a ServerWise client and feel overwhelmed open a ticket, and we’ll get it handled for you.

J. Fleischmann
J. Fleischmann
James is a content strategist, sites manager and copywriter for ServerWise. He's written 51 e-books for clients resulting in over 600,000 new leads as a ghostwriter. James lives in Texas with three dogs and has a Longhorn as a neighbor.