System font stack

Web fonts 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.

Benefits

  1. Fast No network request, no time to parse a font, no flash of an incorrect font.
  2. Styles & unicode System fonts have lots of styles and broad language coverage, unlike many web fonts.
  3. Familiarity Web apps feel more native when they use system font faces.

Basic system font stacks

Sans-serif

/* this is a test */
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, 
segoe ui, helvetica neue, helvetica, Cantarell, 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.