The delightful modern system font stack

I have written a couple of posts on the topic of custom web fonts and potentially reducing font weights with variable fonts. But I have never really mentioned the modern system font stack – the one I use on this website.

The delights of using system fonts

Using a system font instead of a custom webfont on your website has many possible benefits. Your site is faster, and you reduce network requests as well as eliminating FOUT (Flash Of Unstyled Text). You also benefit from a large set of Unicode characters and a broad range of supported languages, which you might not get with a custom webfont.

Modern devices and their operating systems come with quite the array of preinstalled fonts. This extensive list of system fonts is now available on iOS and Mac OS for example. An updated list of fonts across a number of different systems can be viewed in this wiki.

This is why I chose to use the system font stack.

System font stacks


font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;


font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;


font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

I’m not saying that system fonts are perfect for every job, though, they are now a much more aesthetically pleasing, easy-to-read set of fonts that can help to reduce the weight of a website. They can pair nicely with one custom webfont. For example, using one weight of a webfont for titles, but using system fonts for the remaining text. This way you still allow for a level of brand fonts to be used, whilst reducing the weight and load time for the remaining page elements.

I’d love to see how you’re using system fonts in your work. If you have examples, please share them on Twitter and tag @sustainabledevs



What to read next

More from our resources, blogs and case studies

Find this resource useful?

I hope so. I want everyone to be able to benefit from articles like this one. That is why I'm kindly asking for your support.

These resources take time to research and write. The site is run by one person, with occasional volunteer contributors in spare time. Please consider supporting the project if you can.

Plant a tree with Ecologi or Donate £3