CSS System Fonts

By

How to use System Fonts in CSS to improve your site and provide a better experience to your users in terms of speed and page load time

~~~

A little bit of history

For years, websites could only use fonts available on all computers, such as Georgia, Verdana, Arial, Helvetica, Times New Roman. Other fonts were not guaranteed to work on all websites.

If you wanted to use a fancy font you had to use images.

In 2008 Safari and Firefox introduced the @font-face CSS property, and online services started to provide licenses to Web Fonts. The first was Typekit in 2009, and later Google Fonts got hugely popular thanks to its free offering.

@font-face was implemented in all the major browsers, and nowadays it’s a given on every reasonably recent device. If you’re a young web developer you might not realize it, but in 2012 we still had articles explaining this new technology of Web Fonts.

Today

You can use whatever font you wish to use, by relying on a service like Google Fonts, or providing your own font to download.

You can, but should you?

If you have the choice (and by this I mean, you’re not implementing a design that a client gave you), you might want to think about it, in a move to go back to the basics (but in style!)

The impact of Web Fonts

Everything you load on your pages has a cost. This cost is especially impactful on mobile, where every byte you require is impacting the load time, and the amount of bandwidth you make your users consume.

The font must load before the content renders, so you need to wait for that resource loading to complete before the user is able to read even a single word you wrote.

But Web Fonts are a way to provide an awesome user experience through good typography.

Enter System Fonts

Operating Systems have great default fonts.

System Fonts offer the great advantage of speed and performance, and a reduction of your web page size.

But as a side effect, they make your website look very familiar to anyone looking at it, because they are used to see that same font every day on their computer or mobile device.

It’s effectively a native font.

And as it’s the system font, it’s guaranteed to look great.

You might know one of these, as an example:

..they have been using System Fonts for years.

Even the Wordpress dashboard - that runs millions of websites - uses system fonts, and Medium, which is all about reading, decided to use system fonts.

If it works for them, chances are it works for you as well.

I’m sold. Give me the code

This is the CSS line you should add to your website:

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

The browser will interpret all these font names, and starting from the first it will check if it’s available.

Safari and Firefox on macOS “intercept” -apple-system, which means the San Francisco font on newer versions, Helvetica Neue and Lucida Grande on older versions.

Chrome works with BlinkMacSystemFont, which defaults to the OS font (again, San Francisco on macOS).

Segoe UI is used in modern Windows systems and Windows Phone, Tahoma in Windows XP, Roboto in Android, and so on targeting other platforms.

Arial and sans-serif are the fallback fonts.

If you use Emojis in your site, make sure you load the symbol fonts as well:

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";
}

You might want to change the order of the font appearance based on your website usage statistics.

A note on system-ui

system-ui is a generic font family that maps to the UI font of the operating system: San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android. Every current browser supports it (Chrome 56, Firefox 92 and Safari 11 were the first), so the whole stack above can shrink to one line:

body {
  font-family: system-ui, sans-serif;
}

My advice is to keep the long stack for body text, and here’s why. On Windows, system-ui resolves to the UI font of the system locale, not of the page. A reader with Windows set to Japanese or Chinese gets your Latin text rendered with a CJK UI font, and the lang attribute doesn’t change that. MDN says system-ui is meant for UI elements, not for long paragraphs. Tailwind CSS removed system-ui from its default font-sans stack in version 4.3.3 (July 2026) because of this bug, and Starlight and VitePress made the same change. The explicit names in the long stack don’t have the problem, because Segoe UI is Segoe UI whatever the locale.

Use font variations by creating @font-face rules

The approach described above works great until you need to alter the font on a second element, and maybe even on more than one.

Maybe you want to specify the italic as a font property rather than in font-style, or set a specific font weight.

This nice project by Jonathan Neal https://jonathantneal.github.io/system-font-css/ lets you use System Fonts by importing a module, and you can set

body {
  font-family: system-ui;
}

This system-ui is defined in https://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css.

You are now able to use different font variations by referencing:

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

p {
  font: 400 system-ui;
}

Read more

Tagged: CSS · All topics

Want me to talk about your product? You can sponsor this site.

~~~

Related posts about css: