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.


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.


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

Basic 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;


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.