Preload Key Web Fonts
Preloads the font files used above the fold, so text appears in the right font sooner and the layout shifts less.
Opens WPIDE on
Code
// Full URLs of the WOFF2 files to preload (usually one or two: body text and headings).
$wpide_preload_fonts = array(
get_stylesheet_directory_uri() . '/assets/fonts/inter-regular.woff2',
);
add_filter( 'wp_preload_resources', function ( $resources ) use ( $wpide_preload_fonts ) {
foreach ( $wpide_preload_fonts as $url ) {
$resources[] = array(
'href' => $url,
'as' => 'font',
'type' => 'font/woff2',
'crossorigin' => 'anonymous',
);
}
return $resources;
} );Notes
Copy the exact font URLs from your browser's Network panel and preload no more than one or two.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.