The magic of system font stack in 2017


(Praveen Juge) #1

What’s a system font?

While creating a you probably used this css to add a font to your page like this

font-family: "Roboto", sans-serif;

but this requires you to import or link whole font files before displaying it on screen.
Imagine if you use the fonts that are already available in your respective system, it would be the best for performance and would have a very native feel in any device you look the site from.

so instead of using any other font, try,

font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, Arial, sans-serif`;

It respectively uses,

-apple-system - San Francisco font in Safari on Mac OS X and iOS.

BlinkMacSystemFont - Is the same as above but for Chrome on Mac OS.

Roboto - For Android and Chrome OS.

Oxygen - KDE.

Ubuntu - Ubuntu.

Cantarell- GNOME.

Fira Sans - For firefox OS. (yes there is a Firefox OS)

Droid Sans - Android Old Versions.

Helvetica Neue,  Arial,  sans-serif - Default Fallback if all of the above fails.

So for your next project try these font stack and see how fast your page loads.

P.S: Your Designer may not agree with this font selection :sweat_smile: