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.

Android

  • Droid Sans
  • Roboto

Apple System (macOS, iOS)

Linux

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

Windows

  • Tahoma
  • Segoe UI

User installed fonts

CSS spells for above

  • -apple-system and BlinkMacSystemFont fonts for Apple System1
  • 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

Code Snippets

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;

The Future

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

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

From Standard font families.

More Links

  • 1

    system-ui will be a replacement of -apple-system and BlinkMacSystemFont.