July 16, 2017

Consider using system fonts

Next time you find yourself reaching for Google Fonts or Typekit, stop for a moment, and consider using system fonts

Next time you find yourself reaching for Google Fonts or Typekit, stop for a moment, and consider using system fonts. Defaulting to system fonts provides a performance boost and provides a comfortable, consistent experience for the end user. Loading a system font instead of a web font will save you at least one HTTP request and the headache of finding a nice looking font for your project. Try it out!

Medium's approach

Here's an approach I borrowed from Medium. It provides support for versions of macOS, Windows, Android, and Ubuntu.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
  • -apple-sytem macOS/Mac OS X & iOS
  • BlinkMacSystemFont Chrome on macOS/Mac OS X
  • Segoe UI Windows & Windows Phone
  • Roboto Android & Chrome OS
  • Oxygen KDE
  • Ubuntu Ubuntu
  • Cantarell GNOME
  • Open Sans Older versions of Android
  • Helvetica Neue Older versions of Mac OS X
  • sans-serif The vanilla ice cream of fonts