Preload fonts

functions.php

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
}

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

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

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.

Thanks @bilici, that worked.

@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!

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