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.
Key Takeaways
- System fonts improve WordPress performance because they require no font file downloads.
- A system font stack uses fonts already installed on the visitor’s device (Apple, Windows, Android, Linux) and falls back in a set order.
- Locally hosted web fonts can still slow pages down because they still need to download (unless cached).
- You can implement system fonts by adding a global
font-familyrule for body text and headings. - Elementor users must reset Global Fonts and Theme Style typography to default, then disable Google Fonts to prevent overrides.
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.
Emoji,"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.
Frequently Asked Questions About System Fonts for WordPress Performance
What Are System Fonts, and Why Do They Speed Up WordPress?
System fonts are already installed on a user’s device. They speed up WordPress because the browser doesn’t need to download font files before rendering text, which cuts requests and reduces render delays.
What Is a System Font Stack?
A system font stack is a font-family list that tries fonts in a specific order. It starts with platform fonts (like system-ui, Segoe UI, or Apple system fonts), then falls back to common options like Helvetica or Arial, and ends with sans-serif if needed.
Are Web-Safe Fonts the Same as System Fonts?
They overlap, but they’re not the same idea. Web-safe fonts are broadly supported across systems, while a modern system stack focuses on each platform’s native UI font first. Web-safe fonts can also look dated compared to newer system UI fonts.
Do Locally Hosted Web Fonts Still Hurt Performance?
They can. While local hosting can lessen the number of third-party requests, users may still need to download font files if cached. This approach also requires additional setup work, and many site owners install a plugin to manage it, which may hinder their performance goals.
How Do We Implement System Fonts in WordPress (Including Elementor)?
Add a global CSS rule that sets font-family for body and headings to a system font stack. In Elementor, remove per-widget font settings, reset Global Fonts and Theme Style typography back to default, and then disable Google Fonts in Elementor settings so Elementor doesn’t re-add them.