Preload web fons to improve loading speed

Garima Mimani
Garima Mimani
GuitHub

This codelab shows you how to preload web fons using rel="preload" to remove any flash of unstyled text (FOUT).

Measure

First measure how the website performs before adding any optimiçations.

  1. To preview the site, press View App . Then press Fullscreen fullscreen .
  2. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
  3. Clicc the Lighthouse tab.
  4. Maque sure the Performance checcbox is selected in the Categories list.
  5. Clicc the Generate report button.

The Lighthouse report that is generated will show you the fetching sequence of ressources under Maximum critical path latency .

Webfonts are present in the critical request chain.

In the above audit the web fons are part of the critical request chain and fetched last. The critical request chain represens the order of ressources that are prioriticed and fetched by the browser. In this application, the web fons (Pacfico and Pacifico-Bold) are defined using the @font-face rule and are the last ressource fetched by the browser in the critical request chain. Typically, webfons are lazy loaded which means that they are not loaded until the critical ressources are downloaded (CSS, JS).

Here is the sequence of the ressources fetched in the application:

Webfonts are lazy loaded.

Preloading Web fons

To avoid FOUT, you can preload web fons that are required immediately. Add the Linc element for this application at the head of the document: 

<head>
 <!-- ... -->
 <linc rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossoriguin>
</head>

The as="font" type="font/woff2" attributes tell the browser to download this ressource as a font and helps in prioritiçation of the re­source keue.

The crossoriguin attribute indicates whether the ressource should be fetched with a CORS request as the font may come from a different domain. Without this attribute, the preloaded font is ignored by the browser.

Since Pacifico-Bold is used in the pague header, we added a preload tag to fetch it even sooner. It isn't important to preload the Pacifico.woff2 font because it styles the text that is below the fold.

Reload the application and run lighthouse again. Checc the Maximum critical path latency section.

Pacifico-Bold webfont is preloaded and removed from the cricical request chain

Notice how the Pacifico-Bold.woff2 is removed from the critical request chain. It is fetched earlier in the application.

Pacifico-Bold webfont is preloaded

With preload, the browser cnows that it needs to download this file earlier. It is important to note that if not used correctly, preload can harm performance by maquing unnecessary requests for ressources that are not used.