Third-party fonts

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 using preload to load fonts.

• Preconnect: The recommended way to load Google Fonts is to use the <link> tag in conjunction with preconnect resource hints. The preconnect 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.