It is incredibly important to deliver fonts quickly: faster font delivery not only means that text will be visible to the user sooner - but it also has a large impact on whether a font causes layout shifts. If a font cannot be delivered before it is needed, there will typically be a layout shift when the font is swapped. The size of this layout shift can vary depending on how closely the fallback font matches the web font. To see this phenomena in action, view the demo and compare the layout shifts that occur on a fast connection versus a slow connection.
The example below combines two performance techniques to load a third-party font
as quickly as possible: use of inline font declarations and use of preconnect
resource hints. Although this code snippet demonstrates how
to load fonts from Google Fonts, these techniques
also apply to other third-party font providers.
Inline font declarations: Inlining
font-family
declarations in the main document, rather than including this information in an external stylesheet, allows the browser to determine which font files will be used on the page without having to wait for a separate stylesheet file to download. This is important because generally browsers will not download font files until they know that they are used on the page. In most situations, inline font declarations are preferable to usingpreload
to load fonts.Preconnect: The recommended way to load Google Fonts is to use the
<link>
tag in conjunction withpreconnect
resource hints. Thepreconnect
resource hint establishes an early connection with the third-party origin. In the code snippet below, the first resource hint sets up a connection for downloading the font stylesheet; the second resource hint sets up a connection for downloading font files.
Example:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<style>
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Zen Tokyo Zoo', sans-serif;
font-size: 3em;
}
</style>
</head>