MyListing Club

How to Switch to System Fonts and Boost MyListing Website Performance

Building better MyListing websites. One guide at a time.

Guide Contents

Overview

Our How to Switch to System Fonts and Boost MyListing Website Performance guide will show you how to easily implement this solution to build a faster website.

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, we highly recommend recording a baseline of the performance of your website, using your preferred testing tool (GTMetrix, Pingdom, Web.dev, etc.).

Which tool you choose for your baseline isn’t as important and being sure to use the same tool each time, to keep your testing consistent.

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

We recommend the following stack, which is a slightly different version than what Github uses, as we’re adjusting for Chrome’s support of the ‘system-ui’ font.

Simply add the provided CSS to your MyListing website, using your preferred method (Code Snippets plugin, MyListing Custom Code Area, WordPress Customizer, etc.), and clear your browser cache.

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.

				
					//// INSTRUCTIONS: 
//// Copy and paste any of the code snippets below into Theme Tools > Theme Options > Custom Code > CSS.

--------------------------- CODE SNIPPET IS BELOW THIS LINE --------------------------- 

/* 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.

bunnycdn,bunny optimizer

Remove Google Fonts

The scenario we are working with as we document our process, is we have a MyListing website that is using Elementor’s Theme Style options (Elementor Editor > Theme Style > Typography), 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.

Elementor Theme Style

Going off of what when mentioned in the previous section, we are going to remove our Google Fonts.

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.

Note: We 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.
bunnycdn,bunny optimizer
  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: CDN > server > plugin > browser.
  3. Use your preferred optimization testing tool (GTMetrix, webpagetest.org, etc.) to ensure the Glacial Indifference font is no longer loading.

Perfmatters

If you happen to use Perfmatters, as we do for all of our 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, we 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 all the entire site.

bunnycdn,bunny optimizer

Wrap Up

At this point, it’s time to see how our 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, we used for our baseline, we run the test again for our 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.