https://systemfontstack.com

Fork & contribute on GitHub

System font stack

Webfonts were great when most computers only had a handful of good
fonts pre-installed. Thanks to font creation and buying by Apple,
Microsoft, Google, and other folks, most computers have good - no,
great - fonts installed, and they're a great option if you want to
not load a separate font.

Fast

No network request, no time to parse a font, no flash of an incorrect
font.

Styles & unicode

System fonts have lots of styles and broad language coverage, unlike
many webfonts.

Familiarity

Web apps feel more native when they use system font faces.

Basic system font stacks

Sans-serif

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

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;

Mono

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

FAQ

What's -apple-system?

-apple-system and BlinkMacSystemFont are aliases for the default
fonts on new macOS and iOS computers. In recent version, they alias
to the new San Francisco font.

References

  * The New System Font Stack
  * GitHub System Fonts
  * CSS System Font Stack - Monospace v1
  * Implementing system fonts on Booking.com