When you analyze your website with Astra theme from Google PageSpeed it is very likely that the results of the main web metrics show you a problem with the theme’s fonts, indicating that you should preload them using rel="preload"
.
What it “suggests” is that you use this optimization technique so that the fonts do not delay the loading of the page content, prioritizing to obtain the resources that you know your website will need.
Well, let’s listen to it because it is true that if you already know you’re going to need Astra fonts it is best to preload them and make them available when a visitor wants to view the pages of your WordPress website.
We can do this in several ways…
Preload Astra fonts with code
The most independent way to do this is to add the following code to the functions.php
file of the Astra child theme:
/* Preload Astra fonts */
add_filter( 'astra_enable_default_fonts', 'temp_disable_astra_fonts' );
function temp_disable_astra_fonts( $load ) {
$load = false;
return $load;
}
add_action( 'wp_head', 'add_astra_fonts_preload', 1 );
function add_astra_fonts_preload() {
?>
<link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.woff" as="font" crossorigin />
<link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.ttf" as="font" crossorigin />
<link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.svg#astra" as="font" crossorigin />
<style type='text/css'>
<?php
echo '@font-face {font-family: "Astra";src: url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.woff) format("woff"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.ttf) format("truetype"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.svg#astra) format("svg");font-weight: normal;font-style: normal;font-display: fallback;}';
?>
</style>
<?php
}
Code language: PHP (php)
Save the changes to the file and you are done.
Preloading Astra sources with SG Optimizer
If you are hosted on SiteGround, and you use the SG Optimizer plugin to optimize your website, which is highly recommended, it is easier to preload fonts.
Just go to the administration menu “SG Optimizer → Frontend Optimization” and activate “Web Fonts Optimization“.
Then enter the following URLs, one by one, in the empty box and press the PRELOAD button:
https://HERE-YOUR-DOMAIN.COM/wp-content/themes/astra/assets/fonts/astra.woff
https://HERE-YOUR-DOMAIN.COM/wp-content/themes/astra/assets/fonts/astra.ttf
https://HERE-YOUR-DOMAIN.COM/wp-content/themes/astra/assets/fonts/astra.svg
Code language: PHP (php)
Important note: Modify the URLs to put your domain, do not leave the example URLs.

That’s it, there’s nothing more to do.
Preload Astra fonts with WP Rocket
If you use the caching and optimization plugin WP Rocket the procedure is similar to the previous one.
In this case you should go to “Settings → WP Rocket → Preload → Preload Fonts” and in the empty “Fonts to preload” box add the same URLs as before, one in each line, but without the domain, like this:
/wp-content/themes/astra/assets/fonts/astra.woff
/wp-content/themes/astra/assets/fonts/astra.ttf
/wp-content/themes/astra/assets/fonts/astra.svg
It will look like this screenshot:

Preload Astra sources with Autoptimize
Finally, we will see how to preload Astra fonts with the Autoptimize plugin, which is also possible.
This time we will go to the menu “Settings → Autoptimize → Extras → Preload specific requests (advanced users)” and add the full URLs to the fonts, as with SG Optimizer(full URL with domain), but in this case, separated by commas:

Can Astra fonts be preloaded with other plugins?
I know there are other plugins that allow it but I have chosen to contemplate in this guide the most popular ones.
However, if you want to know how to do it with another plugin I will review it and update the guide.
Tankyou for this code, it’s worked fro me with blocksy theme. just past it on function fille with the right url of fonts