Preload fonts

In WP Rocket 3.19, the Preload fonts feature has been revamped to automatically detect and preload the fonts used in the above the fold texts of a page.

To use the Preload fonts on your site, please activate it from the Media tab, in the Fonts section, like this:

Heads up! The process of optimizing the fonts is automatic but not immediate, it's asynchronous.

To make sure the whole process happens as automatic and as fast as possible, use the Remove Unused CSS option as well.

In this article, you can find more details on how WP Rocket implements the preloading of fonts.

Feature overview

When active, the Preload fonts feature detects and preloads the fonts used in the above the fold texts.

It means that there is no need to specify any font files manually.

Additionally, the fonts processed by this optimization will be known as critical fonts, and they are part of the Priority Elements of WP Rocket.

Different fonts for mobile and desktop

WP Rocket processes mobile and desktop versions of a page separately to make the optimization of fonts as accurate as possible. This process is based on the Mobile Cache option, which is the one in charge of creating a mobile-specific set of cache files.

Asynchronous approach

While Preload fonts is an automatic feature, it’s not applied instantly. Instead, this is one of the asynchronous optimizations of WP Rocket, and it follows these steps:

A script is injected to the page to optimize.

As the script is executed with a visit, it will detect the critical fonts and send them back to WP Rocket.

WP Rocket adds preload tags for font files upon the next page cache generation.

Feature benefits

The goal of Preload fonts is to improve the performance of the page, by allowing a smooth rendering of the text components in a page.

This is achieved with the preload tags, which are used by the browser to prioritize the loading of fonts.

This feature should also help to avoid the Flash of Unstyled Text (FOUT) effect.

Benefits for PageSpeed/Lighthouse

The following metrics and audits should be improved:

Largest Contentful Paint (LCP)

Cumulative Layout Shift (CLS)

Ensure Text Remains Visible During Webfont Load

How to check if Preload fonts is working

The Preload fonts feature can be seen in the source code of the pages.

Presence of the feature script

As a first part of the process, a script called wpr-beacon.min.js will be added to the page.

In the source code of the page, the script can be found with the following markup:

<script data-name="wpr-wpr-beacon" src='https://yoursite.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script>

Markup of the preloaded font

Each font will be individually preloaded on the page using a link tag like this:

<link rel="preload" data-rocket-preload as="font" href="path/to/font.woff2" crossorigin>

The data-rocket-preload attribute is added to identify WP Rocket as the optimizer of the font.

Also, the crossorigin attribute will only be placed if the font is hosted externally.

Automatic clearing of critical fonts

The following scenarios will trigger automatic clearing of the critical font:

When permalinks are changed, all the fonts will be purged.

When the theme is switched, all fonts will be purged.

When updating the post, the post-specific fonts will be cleared. But fonts in the related pages will not be purged.

Manual clearing of critical fonts

When you make manual changes to the CSS and fonts of your pages, you should manually clear the critical fonts via the WP Rocket toolbar menu.

To clear the fonts of all your site, from the top menu, you can click on the button called Clear Priority Elements.

And, to clear the fonts of specific URLs, visit the URL while being logged-in, and click on the Clear Priority Elements of this URL button.

Note: These actions will clear the critical fonts, and all the other Priority Elements.

Preload fonts and Remove Unused CSS

When Preload fonts is active, Remove Unused CSS will not preload all the used fonts. This is because Preload fonts work only on the target critical fonts, which is more optimal.

Exclude fonts from preload

Use the following helper plugin in case you need to exclude specific fonts from this optimization:

📥 Download (.zip): WP Rocket | Exclude Fonts from Preload Fonts
Developers: You can find the code for this plugin on GitHub.

Heads up! Manual code edit required before use!

After downloading the plugin zip file, unzip it and open the PHP file in a text editor.
Look for the fonts you want to exclude.

Replace the line 27 with the real font filename you want to exclude, and remove the // characters to uncomment it:
```
//$exclusions[] = 'OpenSans.woff2';
	
```
If you need to exclude more elements, you may keep adding as many lines as necessary.

Additionally, you can exclude and include fonts extensions by following the instructions in lines 42 to 52.
After making your edits, save the PHP file and re-zip the plugin.
In your WordPress site, go to Plugins > Add New > Upload Plugin and upload the zip file.
Activate it and clear the Priority Elements.

Troubleshooting and known conflicts

If you use the Custom Fonts plugin on your site, make sure to deactivate its Global Settings > Preload Fonts feature because it preloads all the fonts of your site. Instead, use WP Rocket's Preload fonts to focus only on critical fonts.

Please refer to the Priority Elements article to find more information about troubleshooting and other known conflicts.

Technical notes

The feature can only process fonts with the woff2, woff, and ttf extensions.
This optimization also works for fonts which are applied to visible text elements.

WP Rocket won’t preload fonts which are not used above the fold, or used in hidden elements.

System fonts will not be optimized because they already stored in visitors browsers, and don’t need to be downloaded or further preloaded.

The data collected by this feature is stored in the wp_wpr_preload_fonts table.

You can find more technical details here.

Preload fonts before WP Rocket 3.19

In WP Rocket versions before 3.19, the Preload fonts feature can be found in the Preload tab, and fonts should be manually entered into the text box.

In this case, you should only add fonts found in the Preload Key Requests audit of PageSpeed results when bypassing WP Rocket. Otherwise, if you preload too many fonts, you could create a bottleneck, and trigger these types of warnings:

Warning: Lighthouse was unable to automatically check the 'font-display' value for the origin

The resource yourfont.woff was preloaded using a link preload but not used within a few seconds from the window’s load event.

However, if you’re using Remove Unused CSS, the fonts will be preloaded automatically, and the Preload fonts box won’t be applied to the site. Letting the Remove Unused CSS feature handle the font preloading is the recommended configuration only if you’re using WP Rocket versions before 3.19.

For any other problems and questions, please contact WP Rocket's support team.