Preload Astra fonts to improve load times and web metrics

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