System fonts vs. web fonts: this is always a hotly-debated topic. Some web designers have strong opinions against system fonts, calling them outright nasty. Others will debate until the cows come home so they don’t have to use system fonts.
Still, others, like yours truly: embrace system fonts for all of the benefits they have to offer.
From cross platform and cross browser compatibility, to being able to load instantly, system fonts have a lot going for them.
They are significantly better than web fonts, for the following reasons.
System Fonts Require No Loading Time
When it comes to load time, system fonts load fast because they are available on the user’s machine.
There is no external file to be downloaded. No load time to worry about.
When you use system fonts, you reduce the amount of bloat and resources that the page must use in order to render the page for the user.
This bloat can mean the difference between barely chugging along and being a great example of a fast website.
System Fonts Don’t Require Any External Requests Or Resources
Because system fonts are already on the user’s machine, you don’t have to worry about external requests or resources being needed in order to load those fonts.
If your site is extraordinarily complex, these requests and resources can sometimes get into the several hundreds of files. This is a significant bottleneck that needs to be repaired, regardless of your connection speed.
This is why system fonts are superior to web fonts: because the resources that are required to load them on the user’s machine are minimal: they are already there.
System Fonts Are On Every Single Device Imaginable
This is the beauty of system fonts: they are already installed on just about every single device imaginable: from Windows to Apple to Linux.
You don’t have to jerry-rig a solution for a specific OS or user because the font is not available on their machine.
This is another point for system fonts: they are the absolute best solution for cross-browser, cross-platform functionality available.
And they don’t cause any additional bottlenecks in the process.
System Fonts Don’t Require Strange CSS Tweaks to Make Them Look Right for Certain Browsers; They’re Just There
Sometimes, while web developers mean well, they don’t always optimize with regards to search engines.
For example: using display: none. Google heavily discourages the use of display:none in certain situations.
It’s also not considered a great practice to use inline CSS to generate your fonts. Why? Because this code may not render the same on all browsers and operating systems, and you may end up causing glitches in the process.
When in doubt, just don’t use any inline code or special tweaks to the CSS in order to make them look right on certain browsers. In the end, you may end up causing more harm than good to the user.
System Fonts Do Not Add to Page Load Time
When a web font loads, the web font has to go through several steps and processes. First, you have to request the file from the third-party server.
If the server is up, then you load the font.
If the server is down, then you have a problem.
If the server is experiencing technical issues, and causing significant page load delays as a result, then this can introduce major problems.
This is why system fonts are a bad idea and can cause significant issues when it comes to pulling fonts from the server to render.
System Fonts Require a Minimum of CSS Code
Did you know that a minimum of CSS code is needed in order to implement system fonts? It’s true. It looks somewhat like this:
<style type=”text/css”>
body {
font-family: arial, helvetica, sans-serif;
font-size: 23px;
font-weight: normal;
}
</style>
That’s it. That’s all it takes to load the same font on every page on the site that appears within the body of the page. System fonts can eliminate code bloat in this manner.
Because they are also already on the user’s machine, there are no calls to the third-party’s server in order to load the font.
Web Fonts Rely on an External Service
Which brings us to our next drawback: web fonts rely on third-party services to store, load, and display the font.
What if something goes wrong with the third-party service?
What if that third party does something to their server, and they erase all the fonts in that location?
What if that third party doesn’t optimize their bottlenecks, and your font causes a significant increase in your page experience numbers as a result?
This is where web fonts can get dicey. Using system fonts in all their glory will help eliminate any of these issues from occurring, and you get the benefit of a fast-loading website as well.
Web Fonts Add to Page Load Time and Server Bottlenecks
Web fonts are a problem, rather than a solution, because they add to page load time and could introduce bottlenecks on the server.
Here’s an example. If you use a JavaScript snippet to load a custom font, this can be a major issue.
In most cases, said snippet makes several connections to the third party hosting the font in order to load the font.
The font can be loaded, but not without a significant delay of the font physically being loaded onto the site.
This means that you may have a flash or two of unstyled text if you are using the third party web font snippet.
If you’re using a custom theme, oftentimes this cannot be overridden without a lot of customization, so you have caused another headache as a result of this.
Too Many Font Changes Can Reduce Readability
It’s important to be smart with your font selection. Choosing too many font changes can cause issues with readability and understanding, and choosing too many fonts themselves can cause significant bloat in your code.
This is why it’s important to make sure that you choose your fonts carefully, and that a smoother transition on the page is the priority.
When it comes to traditional print media like magazines, they can support a greater variety of typefaces.
However, this bold advertising approach does not always translate well to the web.
This is why using a style guide or manual of this sort can help you make the most practical font choices.
Web Fonts Are Not Always the Biggest Source of Bloat on a Website
It is important to note, however, that web fonts are not always the biggest source of bloat on a website.
For example: even though a site may not use web fonts, they may have a significant amount of JavaScript. This JavaScript bloat, in most cases, can be more severe than the impacts of a web font.
This is why a detailed analysis can oftentimes reveal issues from JavaScript that need to be corrected.
The Performance Impact of Choosing System Fonts Over Web Fonts
What could be the performance impact of making this choice?
As Woorkup.com found out, switching from Google Fonts to System Fonts can be quite significant.
They found that using system fonts produced a website that was 6% faster than when they used Google fonts.
This is an example of a speed test they conducted while using Google web fonts:
Source: https://woorkup.com/system-font/
This is a result of their speed test after they replaced web fonts and implemented system fonts:
In addition to the above experiments, they also switched another one of their WordPress sites to system fonts. The results below show great page speed results by doing so:
Don’t Discount How Powerful Moving to System Fonts Can Be
While you may have Gig Speed internet, not everyone does. This is why it’s important to think about potential users in these situations.
Even though prioritization analysis of your traffic and users is all well and good, if a potential client who is going to spend money landed on your site randomly, but they couldn’t even get the font to load, that’s a problem.
Also, there are plenty of options to choose from to make your system font beautiful, including antialiasing. This is why we recommend only resorting to web fonts if there is nothing you can do in terms of using matching system fonts from a style guide, or for special use cases.
By choosing the right system fonts, you too can make your site look beautiful while at the same time saving a bundle on page speed and improving your page experience ten fold.
Image Credits
Screenshot 1: https://woorkup.com/system-font / March 2021
Screenshot 2: https://woorkup.com/system-font / March 2021
Screenshot 3: https://woorkup.com/system-font / March 2021
