// Tutorial //

CSS System Font Stack Reference

Published on March 29, 2020
Default avatar

By Alligator.io

CSS System Font Stack Reference

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Fonts on a website can easily become a large part of the total bundle size that browsers have to download before being able to display a page in its final look and form. Plus, we need to worry about all kinds of things like the infamous Flash of Unstyled Text (FOUT). Arguably, though, part of this whole issue has been resolved, thanks to the font-display property.

Added to that is the fact that the text found on a website is almost always the most important part, so we don’t want text that doesn’t look right or that’s hard to read. What’s a savvy web designer to do to satisfy both performance as well as look and feel?

One solution is to actually resort to using a font that’s already installed on the device of the user. In the past that was not a very elegant solution because some popular systems didn’t come with beautiful font faces baked-in. Things are different now however, and every major operating systems ships with a sans serif system font that looks and reads nice.

So the trick just becomes to provide all those default system font names as the value for the font-family property for the element(s) that should use a system font. The browser will then use the first one that it can find on the current system. Keep in mind that this will also mean that the text will look different based on what system it is being read on. That’s not necessarily a bad thing however, as the text will feel native to the OS its being read on.

Sans Serif System Font Stack

Without further ado, here’s the version of the system font stack used on this very website:

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

That stack is the same one used with WordPress, and has been working pretty well so far for content on Alligator.io. On this site, the titles use the Recursive variable font for a little bit more panache, but the content itself uses the system font.

Here’s a breakdown of those fonts/keywords, if you’re curious:

  • -apple-system and BlinkMacSystemFont: Keywords used to refer to the system font on Apple devices, usually San Francisco or Helvetica Neue, depending on the version of the operating system. On some newer browsers the keyword system-ui can now be used to do the job of those two keywords.
  • Segoe UI: Used on Windows systems.
  • Roboto: System font for Android devices.
  • Oxygen-Sans: Linux systems using KDE.
  • Ubuntu: Ubuntu Linux
  • Cantarell: Linux systems using Gnome (other than Ubuntu).
  • Helvetica Neue: A common fallback font available on many systems (especially Apple systems), just in case the previous ones all failed.
  • sans-serif: If all else fails, fallback to the default browser sans-serif font. Often not the most pleasing result, hence why we don’t just use font-family: sans-serif.

As with most things in life, there are many different flavors of the system font stack and each ones varies a little bit. For example, here’s the stack that GitHub uses.

Monospace System Font Stack

While there’s no system font stack for a serif-based font, there’s one for a monospace font, which can be really useful for code snippets and such. Here’s the one used by Bootstrap v4 (with GitHub using a very similar version as well):

code {
  font-family: SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", 
               "Courier New", monospace;

System Fonts Using @font-face

In case you’re getting tired of repeating the same string of multiple font names at multiple places in your CSS, there’s a trick documented in this CSS-Tricks article to allow making use of a @font-face at-rule to define a single name that refers to the whole stack.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Thank you very much for posting this information, it explains the concept very clearly. What makes me think is that whenever this topic comes up, the “System Font Stack” is predominantly “Sans-Serif” based. Is there a particular reason for this decision? I mean, are designers aware that they are reverse-branding the site (looks like my “iPhone”, my “Windows 10”, etc. and not like “example.com”, “example.net”, etc.)?

Apart from this, small mistakes in the entry order can mess up the appearance of the site, e.g:

body {
	font-family: ... ,
} /* Takes Liberation Serif instead of Ubuntu */ 

instead of:

body {
	font-family: ... ,
} /* Takes Ubuntu on Ubuntu */


Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

card icon
Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Sign up
card icon
Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We’d like to help.

Learn more
card icon
Become a contributor

You get paid; we donate to tech nonprofits.

Learn more
Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow – whether you’re running one virtual machine or ten thousand.

Learn more ->
DigitalOcean Cloud Control Panel