As you can see in the screenshot, I am having an issue with preloading fonts live on Netlify. I am using Nuxt 3 and have my font files directly in the project. The preloading statement is like this in the source code: <link rel="preload" href="/_nuxt/roboto-mono-normal-400.7295944e.woff2" as="font" type="font/woff2" crossorigin>.
And in the font-face I have this: src: url(/_nuxt/roboto-mono-normal-400.7295944e.woff2) format(“woff2”).
They have exactly the same URL, but it still doesn’t work live. I always get the warning: “The resource https://www.carlo-schneider.com/_nuxt/roboto-mono-normal-400.7295944e.woff2 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.” When I test it locally with dev or build, it works completely fine.
The netlify site name is: carlo-schneider.netlify.app and the real domain is carlo-schneider.com
There’s nothing to fix as there’s no error. You’re asking about a warning, not an error. As far as the warning is concerned, it’s a code issue, not a Netlify issue. Chrome is saying that you tried to “preload” an asset, but didn’t use it anywhere on the page. So you could potentially save time and bandwidth by not preloading it if the asset is not required on that page.
Hi @hrishikesh, thank you for your answer. Of course, it is a warning, but the problem is, that the preloading doesn’t work like it should. You wrote, that I didn’t use the font/asset on the page, but this is not correct. Like in the first text written, I am using the font URL in the font-face. When I test it locally with a DEV server or with a build, it is working completely fine. So why does it not work on Netlify? It is important that this feature works to avoid layout shifts every time, when someone loads the page.
Hi @hrishikesh, this hasn’t been resolved. The warning still exists, when I visit the website and reload it with cmd + shift + r. After a few seconds, the warning appears.
Alright, I waited a bit longer and was able to see this. But even after seeing it, I’m unsure how this is a Netlify issue. Firstly, it’s a warning. Secondly, I am not seeing that warning cause any issues with your website. Finally, it’s more of a framework issue to fix (if at all you consider this an issue), for example here’s Gatsby having this issue: Fix “resource preloaded but not used” warning in Chrome · Issue #14872 · gatsbyjs/gatsby (github.com)
A server is not responsible for your code having the preload attributes or the fonts being or not being used as you expect.
Thanks @hrishikesh for your answer. The issue with this is, that the font is using a fallback until the CSS loads the correct font. This leads to layout shifts. That’s why I want to preload the fonts.
Hi @hrishikesh, I could fix this warning by moving the fonts from the assets folder to the public folder. But I am wondering why the font is still switching when I hard-reload with cmd + shift + r. I mean, the preloading of the font should avoid, that I get the FOUT. Do you have any ideas why this is happening?
I understand that this is an issue for you, but it isn’t something Netlify can help with. there’s a workaround listed in the issue Hrishikesh linked. Hopefully that will put you on the right track.
