Preload fonts

Preload Fonts helps address the PageSpeed recommendation to Preload Key Requests. The feature is found on the Preload tab:

How to use Preload Fonts

The Preload Fonts option allows you to tell the browser to start downloading fonts that it otherwise wouldn't discover until much later. This is usually because the font is referenced from within a CSS file. 

Preloading fonts will improve load time and perceived performance.

Which fonts should I preload?

Google PageSpeed Insights will point out any fonts that could benefit from this optimization under the Opportunity, Preload Key Requests:

TIP:  Bypass WP Rocket when running a PageSpeed test to discover candidates for font preloading.

• Right-click on the recommended font in PageSpeed and copy the URL
• Paste the URL into the "Fonts to Preload" field. 
• The font must be hosted on your own domain, or your CDN's domain. You cannot enter externally hosted fonts like Google Fonts here - those are optimized automatically: Optimize Google Fonts
• The font URL must match exactly what PageSpeed provides.

Don't preload everything!

Preload should be used sparingly to avoid creating a bottleneck. Only preload fonts which would otherwise delay the rendering of the page or the perceived performance. If you preload too many fonts which are not needed right away, you will decrease the performance of your site.

Don't preload multiple formats for the same font. Adding the .woff2, .woff, .ttf, .eot, .svg format on the preload box for the exact same font will just force the browser to preload multiple font files while it needs just one (the .woff2 in most cases).

Using Preload Fonts with Remove Unused CSS

When the Remove Unused CSS feature is enabled, Preload Fonts will not work.

Instead, all the found fonts in the resulting used CSS will be preloaded and inserted to the page before the CSS block. This only applies to fonts in Used CSS, not in the Preload Fonts box.

Therefore, you won't need to manually preload fonts when using Remove Unused CSS.

Additionally, you can prevent certain fonts from being preloaded while using Remove Unused CSS, or deactivate the fonts preloading (linked to Remove Unused CSS) as shown here.

Preloading in action

<link rel="preload" as="font" href="https://example.com/wp-content/themes/paperback/inc/fontawesome/fonts/fontawesome-webfont.woff2" crossorigin><br>
	

With preloading, you will see the font being requested earlier in the waterfall and it should improve load time and the first paint time.

Waterfall before font preload

Note that the fonts are requested about halfway down, as the browser naturally discovers them.

Waterfall with font preloading

The fonts are now requested at the top, improving performance.

PageSpeed warning

Warnings: Lighthouse was unable to automatically check the `font-display` value for the origin

This is usually caused by preloading fonts that should not be preloaded. You can verify that in Chrome because it will show a warning like this in the console: 

Preload external fonts

It is not currently possible to preload external fonts using WP Rocket. But it can be easily done by doing the following:

1. Install the Head & Footer Code plugin
2. Go to the page where you want to preload the fonts
3. Add the following preload <link> tags to Header & Footer Code > Head Code:
    
   If you are using the same font for both mobile and desktop: 
   

   <link rel="preload" href="https://fonts.gstatic.com/s/googlesans/v36/4UaGrENHsxJlGDuGo1OIlL3Owp5eKQtG.woff2" as="font" type="font/woff2" crossorigin>
   	

   Replace the example with the correct URL(s) for the external font(s) you want to preload. And make sure that the type="font/woff2" matches the font format you want to use.

4. Clear WP Rocket's cache

Please see this article for more information.