The case for System Fonts
Typography on the web has improved significantly in recent years. Services such as Typekit, Cloud.typography, and Google Fonts have allowed us to load in a multitude of different fonts, however this does come at a cost.
Fonts are heavy. Even on Typekit, which allows you to fine tune the character sets loaded, an average kit size still weighs in around ~100-150kb. If you’re not serving an image-heavy website, fonts suddenly become the biggest overhead in your content delivery.
As anyone on a slow connection can attest, page weight matters. Requiring the user to download extra data, for arguably little to no gain (the OS already has fonts installed, after all), can be quite difficult to justify.
Often, when fonts are loaded from an external source/service, the web page will download and render before the fonts arrive. This would inevitably cause the page to re-render once the fonts had arrived, and would be a jarring experience at best. Due to the frequency of this occouring, we even named the bad experience FOUT(Flash Of Unstyled Text).
System Fonts to the rescue
System Fonts are a brilliant solution to FOUT, and excessive page weight in general. By making the browser load fonts used by the Operating System, there is no need for the heavy and time consuming network requests for external fonts. As the fonts being loaded also match the UI of the Operating System being used, they can also give a more “native” feel to web pages & apps. The font stack itself is relatively simple:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
BlinkMacSystemFont target OSX and iOS, loading in San Fransisco on these Operating Systems.
Segoe UI for Windows and Windows Phone, and
Roboto for Android. Next we have the Linux Distros, with
Oxygen serving KDE,
Ubuntu for Ubuntu and
Cantarell for GNOME.
Fira Sans is for Firefox OS, while
Droid Sans is for old Android devices (before Google introduced the Roboto font). Finally, there are two declarations of
Helvetica Neue, and
sans-serif. These simply serve the task of providing a more controlled font fall back, if all the previous declarations fail to work.
On inspection, we discovered that the vast majority of our page weight was due to the multitude of fonts we were loading. As all the fonts on UA were sans-serif, using system fonts made perfect sense. We swapped out to the font stack above and rechecked our page weight. By swapping to System Fonts, we managed to reduce the total page weight by over 75% (
265kb before system fonts, down to just
65kb after). A huge performance win.
It’s always worth considering if loading additional fonts is really a required step for a better web experience. System fonts are a great alternative, and give instant performance wins. Plus, if you’re on a Mac/iOS Device, you get to take full advantage of San Fransisco UI, which is just lovely.