Login/Register
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event
Asked Answered
htmlcssfonts
W

2

25

On the site I'm working on, I have a few fonts hosted on an external server. In my <head>, I am preloading the fonts and then getting the stylesheet that includes all the @font-face rules for the font. The stylesheet is located on the same server as the fonts.

The problem I'm having though is that the font seems to have been loaded again after the stylesheet gets loaded, not utilising the preloading at all.

I saw one comment while I was searching on how to fix this that suggested this was a Chromium bug however this behaviour happens in Firefox as well.

In console I see:

The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The behaviour I'm seeing is that the font gets loaded ~1 second after the page loads and my client isn't happy with that. If the browser utilised the preloaded fonts, this wouldn't occur.

<link rel="preload" as="font" href="path to SearchlightRegular.woff2" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" as="font" href="path to SearchlightRegular.woff" type="font/woff" crossorigin="anonymous" />
<link rel="stylesheet" href="path to Searchlight.css" />

I have tried putting this both above and below where my main stylesheet is. I've also tried putting the CSS call in my main stylesheet as well. All attempts yield the same results.

Below are the contents of the Searchlight.css file.

@font-face {
    font-family: 'Searchlight';
    src: local('Searchlight'), local('SearchlightRegular'),
        url('path to SearchlightRegular.woff2') format('woff2'),
        url('path to SearchlightRegular.woff') format('woff'),
        url('path to SearchlightRegular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

.font-searchlight {
    font-family: 'Searchlight', serif;
}

Searchlight loading

I imagine there is a fix for this as I've seen sites that have their fonts load in immediately (or just very fast). Nothing I've found while searching for the last 30 minutes has worked for me.

Wald answered 22/12, 2021 at 23:45 Comment(0)
R
10

This is probably, because preload paths and css paths for fonts aren't matching, so the browser is loading that font twice.

You should ensure that your font paths are the same in preloads and css files. You will only know it's working, when you see that there's just one request for each font in the network console.

I think query parameters are not allowed in preloads. If you have query parameters, try to remove them.

For instance Wrong:

Ok:

I hope this helps, regards!

Right answered 22/11, 2022 at 20:53 Comment(1)
solved my problem, tnx, my script tag was addressed like '/theme/js' and preload was '../theme/js' having crossorigin="anonymous" could also end up in security constraintments and reemoving that was the second part of problem solving – Barite
F
0

For those to whom the accepted answer may not work, there are two other solutions you could look into:

  1. If using a .ttf font, check to see that the font import's src format in your css file reads format("truetype") and not format("ttf").

  2. You could also change your font preload link <link rel="preload" as="font" type="font/ttf" crossorigin href=... to a prefetch link <link rel="prefetch" as="font" type="font/ttf" crossorigin href=.... Prefetch simply indicates to the browser that it should preload the font, keep it in cache but won't necessarily be used immediately.

Hope to help someone.

Federate answered 16/6, 2024 at 11:18 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.