Fonts Loading

Fixes: CLS, TTI

The better strategy would be to keep the fonts to a minimum and have them fall back to system fonts. We encourage you to follow the Fonts best practices. Making use of local fonts or system fonts as much as possible would help in faster font rendering. 

We can do the following to make fonts load faster:

1. Use self-hosted fonts.
2. Load system fonts as a fallback and use a font-display property that improves performance, such as font-display: optional; or font-display: fallback;.
3. Preload external font sources such as Google Fonts. Example of preloading fonts: ​​https://web.dev/codelab-preload-web-fonts/

The font loading strategies will be different for the sites based on how many fonts are to be used and how important it is that the font be loaded vs. similar-looking fonts loading on the page.

Example:
If your site loads multiple fonts—for example, Poppins as the primary font and Open Sans and Tahoma as secondary fonts—you should first identify which font is critical for above-the-fold content.

For the primary font, you can use font-display: fallback; or font-display: swap; depending on what works best for your design and user experience.

For secondary fonts, you can use font-display: fallback; or font-display: optional;, which allow for a 3-second swap window or zero swap time, respectively.

In this case, if Poppins is the font that needs to appear above the fold, you can use the following @font-face properties.

@font-face {
	font-family: Poppins;
	font-display: fallback;
	font-style: normal;
	font-weight: 700;
	src: local("Poppins Bold"),
		 local("Poppins-Bold"),
		 resolve('poppins-v5-latin-700.woff2') format("woff2"),
		 resolve('poppins-v5-latin-700.woff') format("woff");
}

Normally we’d use font-display: swap; so the text gets the Poppins font when it is loaded by the browser and ready. However, it waits for the font to load indefinitely, which is unnecessary when you have options to load the system or local fonts instead of waiting. 

Using font-display: optional; and font-display: fallback; will block text rendering for only 100 ms (the font block period) before showing a locally available fallback font. With font-display: fallback;, the browser will additionally wait up to 3 seconds to swap in the requested font if it finishes loading in that time; otherwise, it will continue displaying the fallback font with no further changes.

In contrast, font-display: block; and font-display: swap; will wait indefinitely for the requested font, ensuring it loads but potentially impacting user experience and layout stability.

More on the font-display properties here: https://web.dev/font-display/