Switching to a system font stack can be one of the biggest factors responsible for speeding up your WordPress website. System fonts require no browser download time, and as a bonus…they look great!
Font optimization has been a long-running debate, 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?
Despite ongoing debates, system fonts have advanced significantly, leading to the adoption of a system font stack by major players such as GitHub, Medium, and others.
System Font Stacks
Web fonts were fine 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 want to speed up your website.
System Font Stack Cheat Sheet
- apple-system and BlinkMacSystemFont: These refer to system fonts on Apple devices (typically San Francisco or Helvetica Neue), depending on the operating system version
- 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 (apart from 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 desirable and is why you often see ‘sans-serif’ paired with another font
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.
Performance Alternatives
Web Safe Fonts
Fonts supported by the majority of web browsers and operating systems are considered web-safe. 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 installing another plugin to make the process easier. This is counterproductive to our goal of performance optimization.
Implement System Fonts
Add the code snippet below to your website.
h1,h2,h3,h4,h5,h6,body {
font-family: system-ui, "Segoe UI", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}Then, using your browser, your preferred website performance testing tool, or a visual CSS inspection tool, inspect an area like body text, links, or headings (H1, H2…), and you should see your system font in place.
Elementor Website Builder Users
Remove Google Fonts From Elementor
If you have manually set Google Fonts for individual Elementor widgets, you will need to remove them, as editing settings for individual widgets overrides everything else.
Important: Configuring your Elementor settings globally improves website performance and ease of administration. Do not assign typography on a per-widget basis, or you’ll create a manageability nightmare.
Elementor Design System
Elementor Editor > Site Settings > Design System > Global Fonts
For system fonts to kick in, we need to clear Elementor’s Global Font settings.
- Edit a page with Elementor
- Invoke the Elementor menu by clicking on the bars icon at the top left of the Elementor panel
- Choose Site Settings
- Design System > Global Fonts
- For each item (Primary, Secondary, Text, and Accent), click the edit icon and then click the Back to default icon
- Click Update
Note: If you want to set some typography settings (size, weight, etc.) here, set the Font Family to the ‘Default’ option.
Elementor Theme Style
Elementor Editor > Site Settings > Theme Style > Typography
You can skip this section if you haven’t used this area to configure your fonts.
- Edit a page with Elementor
- Invoke the Elementor menu by clicking on the bars icon at the top left of the Elementor panel
- Choose Site Settings
- Theme Style > Typography
- For each item (body, links, H1, H2, etc.), click the edit icon and then click the Back to default icon
- Repeat the steps above for Buttons and Form Fields
- Click Update
Note: If you want to set some typography settings (size, weight, etc.) here, be sure to set the Font Family to the ‘Default’ option.
Disable Google Fonts
Elementor
WordPress Dashboard > Elementor > Settings > Advanced > Google Fonts > Disable
Perfmatters
If you’re not using Elementor and you use Perfmatters for website performance optimization, you can easily disable all Google Fonts across your website in just a few clicks.