Michael Gearon

CSS System Fonts

Michael Gearon

Last updated on

System fonts in CSS are worth considering if you want to improve your website speed to provide a better user experience. Since 2008 developers have been able to use the @font-face CSS property to use custom fonts on websites. Then as more browsers supported the @font-face property like Safari and Firefox it gain more traction in the developer community. Then we see Typekit pop up in 2009 and then a little be later on Google Fonts, started offering a range of serif, sans-serif and other typefaces for free.

Today the @font-face is fully supported across browsers, and there are so many fonts you can embed on your website. You can either host the fonts yourself or embed them from external sources like Google Fonts.

Everything comes with a (performance) cost

Although it’s great we’ve got so much choice and flexibility with fonts, by embedding fonts on websites it does come at the cost of the speed of the website. Especially on mobile devices using 3G or 4G connections it matters that your website is fast and uses the least amount of data as possible.

When using custom fonts the issue is the font must load before the content is displayed so the user is waiting on those resources to load before they are able to do their task. As system fonts are installed on the device it’s quicker to access those fonts so it’s a great user experience.

Who uses system fonts?

There are lots of well known website using systems fonts like:

  • Medium
  • Bootstrap
  • GitHub
  • Booking.com

Generally a lot of big websites are moving more towards system fonts recently.

The code for system font stack

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

What this will do is the browser will go through each of these fonts from left to right, it’ll see if the device has any of these fonts installed and once it finds one it’ll show that font. If it can’t find any of those font families then it’ll just show a sans-serif font.

Emojis

If you want to enable emojis then you can also require that the symbol fonts are used too, using this code snippet:

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

Further reading

First published on

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects