How to add `rel="preload"` to fonts

I want to add attribute rel="preload"to custom fonts.css file for fast load fonts

  1. add file fonts.css
  2. in bud.config.js
      fonts: ['@styles/fonts'],
  1. in setup.php
add_action('wp_enqueue_scripts', function () {
}, 100);

In head I have
link rel="stylesheet" id="fonts/0-css" href="...../public/fonts.6ba758.css" media="all"

But I have no idea what to do next((

File name have hash (6ba758) and something like that doesn’t work

Does anyone have any ideas?

You need to use the asset function to read the manifest to determine the hash. See:

This is how I’m adding preload to fonts on the Roots site:

add_action('wp_head', function () {
    $fonts = [
    foreach ($fonts as $font) {
        echo '<link rel="preload" href="'.esc_url(asset('fonts/'.$font.'.woff2')).'" as="font" type="font/woff2" crossorigin>';

I have a small question about this.
preload gives better performance, right?

Currently I load my fonts like this:

@font-face {
  font-family: "Sofia Pro";
  src: url('@fonts/sofiapro/SofiaPro.eot');
  src: url('@fonts/sofiapro/SofiaPro.eot?#iefix') format('embedded-opentype'), url('@fonts/sofiapro/SofiaPro.woff2') format('woff2'), url('@fonts/sofiapro/SofiaPro.woff') format('woff'), url('@fonts/sofiapro/SofiaPro.ttf') format('truetype'), url('@fonts/sofiapro/SofiaPro.svg#SofiaPro') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;

it is therefore necessary to add all the files in the piece of code provided by ben?

Thanks !

The font can be loaded faster
Read article