CSS System Fonts: Improve Your Site’s Speed and Performance

tags: [“CSS”, “web development”, “typography”, “web fonts”, “system fonts”]

A Brief History

In the early days of web development, websites were limited to using only the fonts that were available on all computers, such as Georgia, Verdana, Arial, Helvetica, and Times New Roman. If a designer wanted to use a fancy font, they had to resort to using images. Then, in 2008, Safari and Firefox introduced the @font-face CSS property, which allowed online services to provide licenses for web fonts. Typekit, launched in 2009, and later Google Fonts, became popular choices for web designers.

Today

While you have the freedom to choose any font you want to use on your website, it’s important to consider the impact of web fonts on your site’s performance. Every element you load on your page has a cost, especially on mobile devices where bandwidth is limited. Web fonts need to be loaded before the content can be rendered, which can slow down the page load time.

Enter System Fonts

Operating systems come with great default fonts, known as System Fonts. These fonts offer the advantage of speed, performance, and a reduced web page size. Using System Fonts also guarantees a consistent and familiar experience for your users, as they are already accustomed to seeing these fonts on their devices.

Popular websites like GitHub, Medium, Ghost, Bootstrap, and Booking.com have been using System Fonts for years. Even the WordPress dashboard, which powers millions of websites, relies on system fonts. If it works for them, chances are it will work for you too.

Implementing System Fonts

To use System Fonts in your CSS, simply add the following code:

1
2
3

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
}

The browser will interpret these font names and start from the first one, checking if it’s available. Different font names are used for specific operating systems, such as -apple-system for Safari and Firefox on macOS, BlinkMacSystemFont for Chrome on macOS, and Segoe UI for modern Windows systems.

If you use emojis on your site, make sure to load the symbol fonts as well:

1
2
3

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

It’s also important to note that the system-ui font family is mentioned in System Fonts posts online. However, it’s currently known to cause issues in Windows. Work is being done to standardize system-ui as a generic font family, which will allow you to simplify the code to font-family: system-ui in the future.

Using Font Variations

If you need to customize the font on different elements or specify font variations like italic or specific font weights, you can utilize the @font-face rules. Jonathan Neal’s project, System Font CSS, provides a module that allows you to import System Fonts and use different font variations.

For example:

.special-text {
  font: italic 300 system-ui;
}

p {
  font: 400 system-ui;
}