Preload font

Hi there,

Not exactly sure what you mean by "webhooks".

IF it's a plugin that works like Code Snippets plugin or functions.php, then it should be fine.

Sorry Elvin, that should have been Hook Element not Webhooks.

The code I showed does not seem to have the desired effect as I still get the "Ensure text remains visible during webfont load” in pagespeed insights.

Should that code work when placed in function.php? Is there an error? I spent the whole day yesterday trying to resolve the issue.

Thanks.

Sorry Elvin, that should have been Hook Element not Webhooks.

Ah sure, we can make that work as well.

Here's how best to do it:

Create a Hook element and add this code:

<link rel="preload" as="font" type="font/woff2" href="https://domain.com/wp-content/fonts/poppins-v15-latin-regular.woff2" crossorigin="anonymous">
	<link rel="preload" as="font" type="font/woff2" href="https://domain.com/wp-content/fonts/luthier-regular.woff2" crossorigin="anonymous">
	<link rel="preload" as="font" type="font/woff2" href="https://domain.com/wp-content/fonts/josefin-sans-v17-latin-regular.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="https://domain.com/wp-content/fonts/poppins-v15-latin-500.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="https://domain.com/wp-content/fonts/poppins-v15-latin-600.woff2" crossorigin="anonymous">
	

You then set the Display rule location to "Entire Site" and set the hook to "wp_head". Save the Hook element and it should work.

I simply stripped the PHP parts of the code and kept it pure HTML. Hook Element does the add_action('your_selected_hook',function(){ }); for you.

Apologies Elvin, but I'm asking about using the function.php method. The code I have shown on a previous post does not seem to work. Could you have a look at it or give me an alternative? Thanks.

Alright, Let's rework your code a bit.

try this:

/** Head Font Preloading **/
add_action( 'wp_head', function(){
echo '<link rel="preload" as="font" type="font/woff2" href="https://domain.com/wp-content/fonts/poppins-v15-latin-regular.woff2" crossorigin="anonymous">
	<link rel="preload" as="font" type="font/woff2" href="https://domain.com/wp-content/fonts/luthier-regular.woff2" crossorigin="anonymous">
	<link rel="preload" as="font" type="font/woff2" href="https://domain.com/wp-content/fonts/josefin-sans-v17-latin-regular.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="https://domain.com/wp-content/fonts/poppins-v15-latin-500.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="https://domain.com/wp-content/fonts/poppins-v15-latin-600.woff2" crossorigin="anonymous">';
} );

Note: Make sure you don't forget to replace https://domain.com to the proper URL/domain. :D

Sadly this code does not work. I still get the pagespeed insights issue "Ensure text remains visible during webfont load".

I just checked the pagespeed insight and what it looks for is application of font-display: swap; on the mentioned fonts.

Since you're hosting these fonts locally, can you edit the @font-face importation CSS to add font-display: swap; on each of them and see if it still gets flagged by Google PSI?

Let us know.

Woohoo! That solved it! Thanks Elvin

No problem. Glad to be of any help. :D