Skip to content

Web safe system font stack

Jump to bottom
Daisho Komiyama edited this page Nov 22, 2021 · 1 revision

Defaulting to the system font of a particular operating system can boost performance because the browser doesn't have to download any font files, it's using one it already had. That’s true of any "web safe" font.

When in doubt, use one of these.

/* System Fonts as used by GitHub */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* System Fonts as used by Medium and WordPress */
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

Note: This method should only be used on the font-family property instead of the font shorthand.

Source: CSS Tricks - System Font Stack

Menu

Clone this wiki locally