How to Switch to System Fonts and Boost MyListing Website Performance
Get the knowledge your online business needs to succeed.
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.
Note: At the time of this writing, we found that MyListing was also loading a font named ‘Muli’
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.
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.
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′.
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.
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.
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, 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.
- Edit a page with Elementor.
- In the Elementor panel, go to Theme Style > Typography.
- For each area (body, links, H1, H2, etc.) where the Google Font was set, reset the ‘Family’ setting to default.
- In the Elementor panel, go to Theme Style > Buttons, and reset the ‘Family’ setting to default.
- 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).
You may never run into this issue, but if you do, it was resolved by deleting Elementor’s ‘Default Kit’ template, which holds all of the global styling for Elementor.
After deleting the template, Elementor will recreate it automatically but please note that you will lose all custom styling throughout your site that you put in place within Elementor’s ‘Site Settings’ area of the Elementor side panel.
If you have custom settings in this area, before deleting the template, you can export the template and import it into another test site so you have a reference to recreate your settings from.
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.
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.