How to load web fonts quickly

When loading webfonts, there’s a few tricks you can use to speed up the performance:

1. Preconnect to external sources that deliver content critical to your rendering.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

2. Use font-display: swap

<link rel="preload" as="style" href="https://CSS_URL?&display=swap" />

3. If you need to support older browsers, that are not supporting font-display: swap, use this swap-hack

<link rel="stylesheet" href="$CSS&display=swap" media="print" onload="this.media='all'" />

4. If you need to support browsers that do not support preload, without Javascript enabled, fall back to the regular way

<noscript>
	<link rel="stylesheet" href="$CSS&display=swap" />
</noscript>

This note is a steal from csswizardry.com/2020/05/the-fastest-google-fonts/.

Related

• csswizardry.com/2018/11/css-and-network-performance/