Preload key requests

Hello @kodolex

Thank you for your question and I am happy to answer this.
Unfortunately, W3 Total Cache does not have the ability to preload fonts at the moment. We are working on this and this will be implemented in future releases.
You can do it manually and directly edit the header.php of your child theme.
So in your header, you should add:
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Please note that this is just an example and you need to edit the code accordingly with the path to the font and the font type. So make sure that if you are preloading href="fonts/cicle_fina-webfont.woff2" the type= needs to match the font in this case woff2.

I hope this helps!
Thanks!

Hello @vmarko
I have a similar issue in my website, and also using W3 total cache. I followed your given steps and added the link preload to my header.php, but it still doesnt work. Only thing, i dont have any header.php for my child theme, so i added it to my parent theme.
Even in view-source this code doesnt show up.
I am using enfold theme. Any ideas please.

Thank you!

You can also add it in functions.php of your child theme like this:

add_action(‘wp_head’, ‘child_wp_head’);
function child_wp_head() {
echo ‘<link rel=”preload” href=”/wp-content/themes/electro/assets/vendor/fontawesome/webfonts/fa-brands-400.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>’;
echo ‘<link rel=”preload” href=”/wp-content/themes/electro/assets/vendor/fontawesome/webfonts/fa-solid-900.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>’;
echo ‘<link rel=”preload” href=”/wp-content/themes/electro/assets/fonts/font-electro.woff” as=”font” type=”font/woff” crossorigin=”anonymous”>’;
};

Only use your fonts and the theme path.

Hello @sabeehms
Thank you for the infomation.
In your case, you should put it in the header.php of the theme and it should look like something like this:

<link rel="preload" href="/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Please check with your theme support for assistance and check this article for more details.
Thanks!

@kodolex

Thank you for the suggestion. I tried your method, on saving it gives me this error;

Your PHP code changes were rolled back due to an error on line 9 of the wp-content / themes / enfold-child / functions.php file. Please fix it and try to save again.

syntax error, unexpected ‘rel’ (T_STRING), expecting ‘,’ or ‘;’

@vmarko
this is the same thing i already tried before asking. I copy this code where my head tag starts. But after running, the preload doesnt show up in live source code, neither doest it go away from google page insights

@vmarko @kodolex thankyou. Its working now

@sabeehms did you do anything else to fix it? i have the same issue and followed what @vmarko suggested but still nothing is fixed. This is how i wrote it in my header.php in the parent theme as my child theme doesn’t have a header.php folder.

<link rel=“preload” href=“/wp-content/themes/cerato/assets/vendor/cleverfont/fonts/cleversoft.ttf?qj7h27” as=“font” type=“font/ttf?qj7h27” crossorigin=“anonymous”>

<link rel=“preload” href=“/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2” as=“font” type=“font/woff2” crossorigin=“anonymous”>

<link rel=“preload” href=“/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff” as=“font” type=“font/woff” crossorigin=“anonymous”>

<link rel=“preload” href=“/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.woff2” as=“font” type=“font/woff2” crossorigin=“anonymous”>

<link rel=“preload” href=“/wp-content/plugins/woocommerce/assets/fonts/star.woff” as=“font” type=“font/woff” crossorigin=“anonymous”>

<link rel=“preload” href=“/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.9.1” as=“font” type=“font/woff2?5.9.1” crossorigin=“anonymous”>

I inserted it inside the header before <?php wp_head(); ?>
</head>
please help!

@vmarko my site is zeyem.com what code should i write in my site’s header.php? Can you please help me with it?

• This reply was modified 4 years ago by zaeembusiness1.