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

Click to select & copy


font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, 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 font do I get on ?


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.