CODEWITHSUNDEEP
htmlpreload
Gareth Jones
Gareth Jones

Reputation: 931

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?

Upvotes: 84

Views: 135253

Answers (7)

Elias Murcray
Elias Murcray

Reputation: 11

In my case, it matters what order the attributes are in. For instance, this order worked

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

While this didn't

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

It seems to like it if you have the href before the type and as attributes. Of course, don't forget about the crossorigin attribute at the end!

Upvotes: 1

Staysee
Staysee

Reputation: 1907

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>

Upvotes: 4

user10021762
user10021762

Reputation:

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");
}

Upvotes: 1

Vandesh
Vandesh

Reputation: 6894

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" />

Upvotes: 12

undefined
undefined

Reputation: 2491

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 =)

Upvotes: 50

Edvin Uddfalk
Edvin Uddfalk

Reputation: 401

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.

Upvotes: 17

Thomas Puppe
Thomas Puppe

Reputation: 634

Your preload-Tag takes the argument "crossorigin", which must be given for Webfonts, even if they are on the same host as your website.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-origin_fetches or https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#early-loading-of-fonts .

Upvotes: 38

Related Questions