How to Switch to System Fonts and Boost WordPress Website Performance

Font optimization has been a back-and-forth debate for a long time, and most of it seems to center around the use of Google Fonts. Should I host Google Fonts locally? What are the pros and cons? Should I use Google Fonts at all?

While the debates rage on, in the background, system fonts have come a long way and today, some big players like GitHub, Medium, and more, have already moved entirely to a system font stack.

In this guide, we will be moving from Google Fonts (Montserrat) to a custom System Font Stack.

System Font Stacks

Webfonts were fine back in the day when computers had a handful of good fonts pre-installed, but with buy-in from manufacturers like Apple, Microsoft, Google, etc., most computers now have a great set of fonts pre-installed, which is a great option if you speed up your website.

Switching to a system font stack can be one of the biggest factors responsible for speeding up your WordPress website, as system fonts require no download time by the browser, and as a bonus…system fonts look really good!

System Font Stack Cheat Sheet

  • -apple-system and BlinkMacSystemFont: Refers to system fonts on Apple devices (typically San Francisco or Helvetica Neue), depending on the version of the operating system.
  • system-ui: On some newer browsers, this can now be used to do the job of both ‘apple-system’ and ‘BlinkMacSystemFont’.
  • Segoe UI: Windows systems.
  • Roboto: Android devices.
  • Oxygen-Sans: Linux systems using KDE.
  • Ubuntu: Ubuntu Linux.
  • Cantarell: Linux systems using Gnome (other than Ubuntu).
  • Helvetica Neue: Common fallback font for many systems (especially Apple), when previous ones all fail.
  • sans-serif: If all else fails, fall back to the default browser sans-serif font, which is not really desirable and is the reason you often see ‘sans-serif’ paired with another font.

Performance Alternatives

Web Safe Fonts

Fonts that are supported by the majority of web browsers and operating systems are considered to be web-safe, and operating systems automatically include these fonts, so visitors don’t have to download them from your server.

Web safe fonts can look outdated, compared to other, more modern fonts, so they aren’t the preferred option these days.

Web Fonts (Hosted Locally)

Fonts that are more modern-looking than Web Safe Fonts, but even though they can be hosted locally on your server for faster delivery, they still require download time for your users, if they are not already cached in their browser.

Hosting these fonts locally can be a challenge for non-technical website owners, which often results in the installation of another plugin to make the process easier, and this is counterproductive in our goal of performance optimization.

Set Baseline

Before starting out on a journey like this, I highly recommend recording a baseline of the performance of your website, and my preferred tool for auditing website performance is Webpagetest.org.

Each time you introduce a major change, as you go along, you’ll want to record another baseline to see how things have changed, for the good or bad. By recording baselines, you can then determine which changes were the most beneficial, whether paid options were actually needed, etc.

For the purposes of this guide, we’ll be creating 2 baselines:

  • Baseline 1 (Google Font): Before any work is done using this guide, measuring the usage of the Montserrat Google Font.
  • Baseline 2 (System Font Stack): After adding our custom System Font Stack and killing Google Fonts.

So, before continuing on with this guide, it’s advisable to take care of ‘Baseline 1′.

Baseline 1

Here are the results from Baseline 1, with external domain requests being made to fonts.gstatic.com

  • Font Content Size: 77.8KB
  • Font Requests (External): 3 (fonts.gstatic.com)

System Font Stack Implemenation

Add Your System Font Stack CSS

I recommend the following stack, which is a slightly different version than what Github uses, with the one difference being an adjustment to allow for Chrome’s support of the ‘system-ui’ font.

To implement this stack, simply add the provided CSS to your website, using a solution like WPCodeBox.

Note: System Font Stacks attempt to load the fonts in the order you place them in, so if you have a need (or a preference) to load a specific font before another, please keep this in mind.

				
					/* SYSTEM FONT 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";
}
				
			

At this point, if you inspect an area like body text, links, headings (H1, H2…), you should see what’s shown in the screenshot below.

system fonts for mylisting websites body

Remove Google Fonts

Elementor Theme Style

If you haven’t used Elementor’s Theme Style options to configure your fonts, you can skip this section, as we address other ways to remove Google Fonts, below.

  1. Edit a page with Elementor.
  2. In the Elementor panel, go to Theme Style > Typography.
  3. For each area (body, links, H1, H2, etc.) where the Google Font was set, reset the ‘Family’ setting to default.
  4. In the Elementor panel, go to Theme Style > Buttons, and reset the ‘Family’ setting to default.
  5. Click the ‘Update’ button.

Note: If you have manually set Google Fonts for specific elements outside of Elementor’s ‘Theme Style’ options, you will need to adjust those as well, setting the ‘Family’ to default for the typography.

For example, if you have used Theme Styles, but then you went in and changed the typography settings for a random button on your website, you may want to reset that button’s typography settings unless you want it to look different from your other buttons that.

In short, manually editing an element overrides whatever you set in your Theme Styles with Elementor.

Perfmatters

If you happen to use Perfmatters, as I do for all of my sites, you can easily disable all Google Fonts in a few clicks.

system fonts for mylisting websites disable google fonts perfmatters