Is website font decoration more important than speed performance? Is the typography on your site the easiest way for users to consume content?

Zero-latency fonts mean losing no time in exchanging information. The system responds with instant font information. We recommend not using Google Fonts – or any other font hosted from a remote server.

REFERENCE: https://pagepipe.com/should-i-disable-font-awesome-and-google-fonts-for-improved-speed/

The more fonts you use the worse site drag becomes. OMGF plugin is for hosting Google fonts locally. We’ve tried it and are not impressed. For best speed, accept your fate. Sacrifice fancy custom fonts and use utilitarian system fonts instead.

There are other tricks touted by various plugin authors and coders as beneficial. These include lazy loading fonts or reducing font character sets. These are esoteric wastes of energy. A false sense of superiority to justify keeping decorate fonts.

Attractive fonts are popular for designing a website. Most don’t realize web fonts add extra HTTP requests and affect server response time. Don’t go for fancy. Simplify. Don’t follow herd popularity. Face it. Content readers don’t care about fonts as much as the whim of website owner. Give up the vanity.

Why is a mobile font stack best practice for mobile speed performance?

The fastest font is one where you never have to make a request. In the past, those were ubiquitous web-safe fonts like Arial, Verdana, and Georgia. These are on 99.9 percent of computers. The last font specified in a font stack is a catchall fail-safe sans-serif or serif default font.

The System-UI font is best for readability on small mobile screens. These are the default font settings in modern themes. Themes like WordPress default Twenty-nineteen theme or GeneratePress or Astra. They use a Cascading Style Sheet (CSS) font stack coding trick. It looks like this code definition:

font-family: -apple-system, system-UI, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

This snippet instructs the browser to use device native fonts. On modern themes, you make these settings in the theme customizer. When loaded, the theme checks the first font suggestion. Then proceeds to the last in the series until it finds a system match. This happens faster than a blink. This is great, for two reasons:

There’s no external font to download during page load.

The site adopts the feel of the OS, making it feel “just right.”

Defaulting to the system font of a particular operating system always boosts performance. 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, also. The beauty of system fonts is that it matches what the current OS uses. It’s a comfortable look. It’s optimized and built-in for the device screen. Native fonts are already installed on the computer or device. They’re designed for best mobile readability on small screens.

What are those native fonts? It depends. For example:

• Mac OS X (El Capitan): San Francisco
• Mac OS X (Yosemite): Helvetica Neue
• Mac OS X (Mavericks): Lucida Grande
• Windows (Vista): Segoe UI
• Windows (XP): Tahoma
• Windows (3.1 to ME): Microsoft Sans Serif
• Android (Ice Cream Sandwich (4.0)+): Roboto
• Android (Cupcake to Honeycomb): Droid Sans

With new system versions, come new fonts, and thus the need to update your font stack.

But there is a method to end babysitting font changes: specify system UI fonts. It doesn’t need a web-font delivery service or font files stored on your server.

We recommend using the zero-latency system UI fonts on your website.

When we use code like font-family: system-UI, sans-serif; we’re all set. Here’s what happens on various devices:

Enabled by default in Chrome 56, system-UI is a special font name. It tells Chrome to use the system font (be it Cantarell in Gnome, San Francisco in macOS, etc.)

So today this is the recommendation:

font-family: -apple-system, system-UI, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Safari and Firefox on Mac will recognize -apple-system and use the Mac system font. Then comes the standard system-UI, but only available in Chrome 56. Older versions of Chrome, on Mac only, will interpret the same with BlinkMacSystemFont. Now comes Segoe UI, unlike the first three this is a real font name, the one used in Windows since Windows Vista. Now comes: Roboto for Android, Helvetica Neue for some versions of macOS, and Arial for old Windows.

This superior font stack below helps Linux users – and everything else:

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", Arial, Helvetica, sans-serif;

If you want, you can still add Droid Sans for old Android, Fira Sans for Firefox OS, and maybe Lucida Grande for some old versions of macOS. The list is long – but you only have to type it once.

Does removing web fonts make your site faster?

Yes.

Speed design requires compromise. Removing web fonts is an easy 15 percent speed gain – but often even better.