Optimising loading custom fonts to reduce layout shifts

One of the most common causes of layout shifts is late-loading web fonts. To avoid layout shifts caused by web fonts, you can use the following techniques:

• Preload critical fonts: Preloading critical fonts can help ensure that they are loaded before they are needed, thus avoiding layout shifts.
• Subset fonts and serve as woff2: Subsetting fonts and serving them as woff2 can help reduce the size of the font files, which can speed up their loading time.
• Use variable fonts or a limited set of weight variations: Using variable fonts or a limited set of weight variations can help reduce the number of font files that need to be loaded, which can speed up their loading time.
• Host your own fonts on your main domain or subdomain: Hosting your own fonts on your main domain or subdomain can help ensure that they are loaded quickly and reliably.

To further optimise web font loading, you can also use the font-display property to control how web fonts are displayed while they are being loaded. For example, you can use font-display: swap to display fallback text while the web font is being loaded, and then swap in the web font when it is available.

Fixing layout shifting brought on by custom fonts can also be done using font-display: optional. This will avoid swapping and render fonts immediately when they are already available.