Using only system fonts

Working on my new website and try to spare my visitors from downloading useless bytes of data, I identified my font files being among the heaviest bits retrieved by every visitor.

I know these files are cached but still, it is at least downloaded once in a while, that's already too much for something as subjective as fonts.

The further we go, the more clean and lean the defaults system font are becoming.

But how to use these fonts in your CSS?

There goes the sans-serif fonts #

--sans-serif-font:
  system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
  "Helvetica Neue", arial, sans-serif;

system-ui will be the default font set system-wide by the user. You could instead use ui-sans-serif in order to be sure that the displayed font is really a sans serif font, but this value isn't supported outside Safari for now.

The browser will try to load every other values successively until one matches. All fonts used here are matching the default fonts used in every major OS (macOS, Windows, Ubuntu, etc.)

Monospaced fonts #

--monospace-font:
  ui-monospace, menlo, monaco, "Cascadia Mono", "Segoe UI Mono",
  "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
  "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

The same logic applies here, ui-monospace is currently only supported in Safari, but the next matching font will be used depending on user OS.

And last but not least, serif fonts #

--serif-font:
  ui-serif, Georgia, Garamond, Cambria, "Times New Roman", Times, serif;

Again, same here, ui-serif is not widely supported. The other fonts should come pre-installed in almost all OS, you can order them as it suits you.

Font uniformization #

As it is not possible to know what font will be used for each user in the end, you can set the font-size-adjust CSS property to ex-height 0.5 in order to uniformize the space occupied by the loaded font regardless of its family.

This should prevent UI breaking in most cases.

body {
  font-size-adjust: ex-height 0.5;
}

A nice explanation by Alex Kladov is available here if you want to know more about this CSS property.

If you are looking to optimize your pages loading and avoid either the blocking while font load or the font swap when enabled, I recommend you to ditch these customs fonts and a rely on the user system ones. They are almost always good enough.

In my opinion, you'll differentiate your design a lot more with delightful colors, design, and animations. Fonts can often be overrated.