'preloading font with rel preload

I am preloading a font using the <link> HTML tag with the rel attribute set to preload as captured in the snippet below;

<link rel="preload" href="fonts/32ADEO.woff2" as="font" type="font/woff2">

While this works as expected by loading the typeface, it gets loaded again.

The screenshot of the network tab in Google Chrome browser shows the typeface loading twice - see below;

enter image description here

Also, I get the following warning in the Google Chrome browser console tab;

The resource https://example.com/new-v8/fonts/32A0E0.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it Please make sure it has an appropriate 'as' value and it is preloaded intentionally.

What am I doing wrong and how can I fix it?

htmlpreload


Solution 1:[1]

I kept getting the warning when trying to load preload a google font.

Turns out I was missing the fact that the font was being loaded as a style from google. I solved this by setting the as="style' and then using rel="stylesheet preload prefetch".

See code example below:

<link 
 as="style"
 rel="stylesheet preload prefetch" 
 href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" 
 type="text/css" 
 crossorigin="anonymous" />

Happy coding =)

Solution 2:[2]

Don't know if I am re-opening something that has already been solved here, but I just wanted to mention you need to place the rel="preload" links after the source that loads the fonts, e.g. the CSS file.

Solution 3:[3]

In my case, changing to rel="stylesheet preload" worked on Chrome -

Here's the bare minimum which WORKED -

<link rel="stylesheet preload" href="path/to/stylesheet" as="style" />

What DID NOT WORK was -

<link rel="preload" href="path/to/stylesheet" as="style" />

Solution 4:[4]

I ran into this issue with a self hosted font. I was preloading it like this:

<link rel="preload" href="/fonts/SomeFont.woff2" as="font" type="font/woff2" crossorigin>

The problem was that webpack was adding a hash to the compiled css font path.

/* Before */
@font-face {
    font-family: "SomeFont";
    src: url("../fonts/SomeFont.woff2") format("woff2");
}

/* After (Webpack Output) */
@font-face {
    font-family: "SomeFont";
    src: url("../fonts/SomeFont.woff2?7d18a001dd0b6e04c2393") format("woff2");
}

So I added the same hash to the preload tag and problem solved!

<link rel="preload" href="/fonts/SomeFont.woff2?7d18a001dd0b6e04c2393" as="font" type="font/woff2" crossorigin>

Solution 5:[5]

I had even more fun. In addition to this warning, I found that my browser downloads both woff and woff2, although it should only woff2. Changing the order of src descriptors in @font-face helped me. In the end, the solution for me looks something like this:

<link href="/assets/fira-sans-condensed-v5-max-regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="/assets/bundle.css" rel="stylesheet">

@font-face
{
    font-display: swap;
    font-family: "Fira Sans Condensed";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fira-sans-condensed-v5-max-regular.woff") format("woff");
    src: url("/assets/fira-sans-condensed-v5-max-regular.woff2") format("woff2");
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 0x0147k3r
Solution 2 Edvin Uddfalk
Solution 3 Vandesh
Solution 4 Staysee
Solution 5 Bileslaw

Related Questions