![fontface prepros loading wrong area fontface prepros loading wrong area](https://i.ebayimg.com/images/g/DusAAOSwrlVi4P~0/s-l500.jpg)
Check the Maximum critical path latency section. Reload the application and run lighthouse again. It isn't important to preload the Pacifico.woff2 font because it styles the text that is below the fold. Since Pacifico-Bold is used in the page header, we added a preload tag to fetch it even sooner.
![fontface prepros loading wrong area fontface prepros loading wrong area](https://i.ebayimg.com/images/g/p6wAAOSwf~pi5aI8/s-l400.jpg)
Without this attribute, the preloaded font is ignored by the browser. The crossorigin attribute indicates whether the resource should be fetched with a CORS request as the font may come from a different domain. The as="font" type="font/woff2" attributes tell the browser to download this resource as a font and helps in prioritization of the resource queue. Add the Link element for this application at the head of the document: In order to avoid FOUT, you can preload web fonts that are required immediately. Here is the sequence of the resources fetched in the application: Preloading Web fonts # Typically, webfonts are lazy loaded which means that they are not loaded until the critical resources are downloaded (CSS, JS). In this application, the web fonts (Pacfico and Pacifico-Bold) are defined using the rule and are the last resource fetched by the browser in the critical request chain. The critical request chain represents the order of resources that are prioritized and fetched by the browser. In the above audit the web fonts are part of the critical request chain and fetched last. The Lighthouse report that is generated will show you the fetching sequence of resources under Maximum critical path latency.
Fontface prepros loading wrong area how to#
This codelab shows you how to preload web fonts using rel="preload" to remove any flash of unstyled text (FOUT). Download Chrome if you don't already have it.