Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Preload 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
}
@ajay-str-engg

This comment has been minimized.

Copy link

@ajay-str-engg ajay-str-engg commented Feb 27, 2020

how to solve Preload problem in astra. where to upload this code.

@Balachandark

This comment has been minimized.

Copy link
Owner Author

@Balachandark Balachandark commented Feb 29, 2020

You need to add the code in your child theme's functions.php file

@bilici

This comment has been minimized.

Copy link

@bilici bilici commented May 2, 2020

If you add

... type="font/woff" crossorigin />
... type="font/ttf" crossorigin />
... type="font/svg" crossorigin />

SVG load error disappears.

Now only Elementor Font Awesome fa-brands-400.woff2 left for me.

fa-brands

@qx54

This comment has been minimized.

Copy link

@qx54 qx54 commented May 16, 2020

Thanks @bilici, that worked.

@making8

This comment has been minimized.

Copy link

@making8 making8 commented Sep 1, 2020

@bilici what are you doing for the latter error woff2 error? I'm getting an error for …webfonts/fa-solid-900.woff2. What are you doing for this?

I left the "as" in there because I got an error without but now getting:

" has an unsupported type value" from Lighthouse|

 <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.woff" as="font" type="font/woff" crossorigin />
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.ttf" as="font" type="font/ttf" crossorigin />
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.svg#astra" as="font" type="font/svg" crossorigin />
  <style type='text/css'>

Thanks in advance!

@pavosdijital

This comment has been minimized.

Copy link

@pavosdijital pavosdijital commented Mar 3, 2021

could you please help with the code link rel preload for images? thank you very much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment