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

sage
,
1

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

  1. add file fonts.css
  2. in bud.config.js 
.entry({
      ...
      fonts: ['@styles/fonts'],
    })
  1. in setup.php 
add_action('wp_enqueue_scripts', function () {
  bundle('fonts')->enqueue();
}, 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?

2

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 = [
        'dankmono-regular',
        'public-sans-v11-latin-300',
        'public-sans-v11-latin-700',
        'public-sans-v11-latin-700italic',
        'public-sans-v11-latin-italic',
        'public-sans-v11-latin-regular',
    ];
    foreach ($fonts as $font) {
        echo '<link rel="preload" href="'.esc_url(asset('fonts/'.$font.'.woff2')).'" as="font" type="font/woff2" crossorigin>';
    }
});
2 Likes
3

Hello,
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 !

4

image
image853×96 16.6 KB

5

The font can be loaded faster
Read article