[Resolved] Preload font

[Charlie]

Good day,

I’m trying to resolve “Ensure text remains visible during webfont load” in pagespeed insights.

I found script to add to the my child theme’s function.php, but it doesn’t seem to work

/** Head Font Preloading **/
function font_preloading_preload_key_requests() { ?>
	<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">
	
<?php }
add_action( 'wp_head', 'font_preloading_preload_key_requests' );

I see there is a way to add via webhooks, but is it possible in the function.php.

(I’ve just switched to GP/GB so this is all new to me. I’m learning so much.)

Thanks

[Elvin]

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.

[Charlie]

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.

[Elvin]

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.

[Charlie]

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.

[Elvin]

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. 😀

[Charlie]

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

[Elvin]

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.

[Charlie]

Woohoo! That solved it! Thanks Elvin

[Elvin]

No problem. Glad to be of any help. 😀

[Author]

Posts