How to Switch to System Fonts and Boost MyListing 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 MyListing 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 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, measure the usage of the Montserrat Google Font.
  • Baseline 2 (System Font Stack): After adding the 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 MyListing 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.

The scenario I’m working with as I document this process is I have a MyListing website using Elementor’s Theme Style options to set typography throughout the website, which is replacing MyListing’s default font (Glacial Indifference).

No other steps have been taken to add fonts to this particular website.

Remove Google Fonts

Note: If you have manually set Google Fonts for individual Elementor widgets, you will need to adjust those as well, editing settings for individual widgets override whatever you set in the areas I’m about to cover.

Pro Tip: It’s better for website performance and ease of administration if you are able to configure your Elementor settings globally.

Elementor Design System

If you haven’t used Elementor’s Design System options to configure your fonts, you can skip this section.

  1. Edit a page with Elementor.
  2. Invoke the Elementor menu by clicking on the bars icon at the top left of the Elementor panel.
  3. Choose ‘Site Settings’
  4. Design System > Global Fonts
  5. For each item (Primary, Secondary, Text, etc.), change the ‘Family’ to ‘Default’.
  6. Click ‘Update’.

Elementor Theme Style

If you haven’t used Elementor’s Theme Style options to configure your fonts, you can skip this section.

  1. Edit a page with Elementor.
  2. Invoke the Elementor menu by clicking on the bars icon at the top left of the Elementor panel.
  3. Theme Style > Typography
  4. For each item (body, links, H1, H2, etc.) change ‘Family’ to ‘Default’.
  5. Theme Style > Buttons
  6. Change ‘Family’ to ‘Default’.
  7. Click ‘Update’.

Note: I ran into an issue where the MyListing theme or Elementor wouldn’t let go of the theme’s default font (Glacial Indifference).

MyListing support has provided a code snippet (see below) to stop the loading of the theme’s default font, but it doesn’t help if the font is already “stuck” in Elementor’s Global Styles.

You may never run into this issue, but if you do, there are two options. 1.) Delete Elementor’s ‘Default Kit’ template or 2.) Edit theme files.

				
					add_filter('mylisting/assets/load-default-font', '__return_false');
				
			

Prevent the Glacial Indifference Font From Loading - Delete Elementor's Default Kit Template

While it is the easiest option, deleting the Default Kit template will cause you to lose all custom styling throughout your site that you put in place within Elementor’s ‘Site Settings’ area of the Elementor side panel.

You cannot export the Default Kit template like other Elementor templates, so if you have custom settings in this area that you wish to save to have a reference, your only option is to clone your site.

  1. WordPress Dashboard > Templates.
  2. Click on the ‘All’ menu item to expose all templates.
  3. Locate and trash the Default Template.
  4. Empty the trash or at least choose to permanently delete the Default Kit.

If you are not too far along in your build process, deleting the Default Kit may be a good option for you, but there is also another way if you are comfortable updating theme files.

Prevent the Glacial Indifference Font From Loading - Edit Theme Files

If deleting Elementor’s Default Kit is not an option for you and the code snippet provided by MyListing support isn’t working, your other option is to manually go in and remove the lines of code from the theme.

To complete the following steps, you can FTP into your website using a free application like FileZilla or there are free plugins for file management.

  1. Create the ‘/wp-content/themes/my-listing-child/includes’ folder structure in your MyListing Child Theme.
  2. From that same path in the Parent Theme ‘/wp-content/themes/my-listing/includes’, copy the assets.php file to your local workstation.
  3. Edit the assets.php file with your preferred text editor, removing the lines shown in the screenshot below.
  1. Save the file and if using FTP, ensure the file gets uploaded upon saving.
  2. Clear every layer of caching, in the following order, assuming you have all of the following in play: ShortPixel CSS > Kinsta/WP Rocket >  Cloudflare > Browser.
  3. Use a website performance testing tool like Webpagetest.org to verify the Glacial Indifference font is no longer loading.

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.

While there is a setting in the ‘General’ tab of Perfmatters, to kill all Google Fonts, I found that this breaks the Material Icons (fonts) that MyListing uses.

So, what you want to do instead, is edit any page with the Perfmatters Script Manager feature, and simply disable Google Fonts for the entire site.

Wrap Up

At this point, it’s time to see how the hard work has paid off and if the switching from Google Fonts to a System Font Stack was worth the effort.

Using the same performance testing tool I used for my baseline, I ran the test again for my MyListing website.

  • Font Content Size: 17.8KB (Reduced by 70KB)
  • Font Requests (External): 0 (Reduced by 3)

The results are undeniable, so the question really comes down to whether you want to sacrifice some performance, in exchange for being able to use custom fonts of your choice.

NEW: MyListing Club Community

Get a true community experience that Facebook just can't offer.

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • UiPress ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)