System Fonts CSS

I switched from Webfonts to system fonts to improve the performance of this website. However, I still use webfont for Chinese and Japanese to have better reading experience.

Let’s take a look at what Operating System offers.

Droid Sans
Roboto

Lucida Grande
Helvetica Neue
San Francisco
New York (2019)

Oxygen (Linux, KDE, Arch Linux)
Cantarell (Linux, GNOME)
Ubuntu (Ubuntu)

Tahoma
Segoe UI

Noto fonts, popular Open Source font many people use
Fira Sans and Fira Code

-apple-system and BlinkMacSystemFont fonts for Apple System¹
Segoe UI, SegoeUI for Windows
Roboto, Droid Sans, Droid Sans Fallback for Android
Ubuntu for Linux
Fira Sans for Firefox OS
For Emojis
- Apple Color Emoji for rendering Emojis on Apple System
- Segoe UI Emoji, Segoe UI Symbol for rendering Emojis on Windows
- Noto Color Emoji from Google
- emoji ¶
For display code
- SFMono-Regular, SF Mono for Apple System
- Ubuntu Mono for Ubuntu
- Liberation Mono, DejaVu Sans Mono for Linux
- Menlo, Courier for the rest
- Fira Code, Noto Mono if user installed

As of 2019 December, sites are using these snippets. For your reading pleasure, I break them into multiple lines.

twbs/Bootstrap

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, "Noto Sans",
             sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
             "Segoe UI Symbol", "Noto Color Emoji";

What I’m using:

font-family: -apple-system-ui-serif, ui-serif,
             system-ui, -apple-system, BlinkMacSystemFont,
             system, "Noto Sans", noto, "Fira Sans",
             Segoe UI, "Droid Sans", "Droid Sans Fallback",
             "Roboto", "Cantarell", "Ubuntu",
             "Helvetica Neue", Arial, sans-serif,
             Apple Color Emoji, Noto Color Emoji,
             Segoe UI Emoji, Segoe UI Symbol, emoji;

In a galaxy far, far away, people are using:

ui-serif
ui-sans-serif
ui-monospace
ui-rounded

From Standard font families.