The resource at “http....woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly

[kolserdav]

When I use in @next/font/google in version 13.1.4 I often get warnings in browser Firefox.

import { Ubuntu } from '@next/font/google';

const ubuntu = Ubuntu({ subsets: ['cyrillic', 'latin'], weight: '400' });
const ubuntuBold = Ubuntu({ subsets: ['cyrillic', 'latin'], weight: '700' });

function App() {
...some code
  return (
    <div className={s.content} style={{ color: theme.text }}>
      <div className={clsx(s.content, isDefault ? ubuntuBold.className : ubuntu.className)}>
        {!isDefault ? activeTab?.content : tabDefault}
      </div>
    </div>
  )
}

The resource at “http://localhost:3000/_next/static/media/f9e3f1f7478b5cbf.p.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. localhost:3000
The resource at “http://localhost:3000/_next/static/media/e76854c588de135c.p.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. localhost:3000
The resource at “http://localhost:3000/_next/static/media/0cf580864ae59341.p.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. localhost:3000
The resource at “http://localhost:3000/_next/static/media/f884d4ea94220255.p.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. localhost:3000
The resource at “http://localhost:3000/_next/static/media/d51be7479414f4fc.p.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. localhost:3000
The resource at “http://localhost:3000/_next/static/media/e94cfb95acf534f2.p.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

[niqwithq]

Did you ever manage to fix this? Currently facing the same issue...

[kolserdav]

I could not solve it, I had to make such a wrapper https://github.com/kolserdav/ana/tree/d7d7e3b7a58fdddde980d2cf8cf9db606c8ca1e7/packages/app/fonts .

[ivandata]

I have the same issue, but only in the Firefox.

[blazejmojak]

I had similar problem with fonts:

preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly

I just removed unused font declarations.

Before:

import { Inter, Roboto, Sora } from 'next/font/google'

export const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter'
})

export const roboto = Roboto({
subsets: ['latin'],
display: 'swap',
variable: '--font-roboto',
weight: '500'
})

export const sora = Sora({
subsets: ['latin'],
display: 'swap',
variable: '--font-sora'
})

and after (I use only Inter font in my NextJS project):

import { Inter } from 'next/font/google'

export const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter'
})

It was acording to the official doccumentation (using multiple fonts in NextJS Vercel Project):
https://nextjs.org/docs/app/building-your-application/optimizing/fonts#using-multiple-fonts

[SalahAdDin]

It does not say wich fonts are not being used.

[blazejmojak]

It does. There were export const roboto and export const sora removed.

[SalahAdDin]

The resource at “http://localhost:3000/_next/static/media/233854115606ca2d-s.p.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

It is related to the locale fonts I am loading, but I'm using them and even so, I have this issue.

[DespotB]

What worked for me is to remove the packaged "styled-jsx". I had styled-jsx installed as a separate package in my app. This created some conflict with next.js built-in styled-jsx. Deleting the package fixed it.

[raphaelobene]

You

need to add preload: false to the object

[IliyaZafirov]

Import Only Used Fonts:
Double-check that you’re only importing the fonts you actually use. In my project, removing unused fonts (e.g., keeping only Inter if that's all you need) resolved the preload warnings.

Remove the Standalone "styled-jsx" Package:
If you have the "styled-jsx" package installed separately, remove it. It can conflict with Next.js's built-in styled-jsx, and doing so has helped eliminate the warnings in my case.

I hope this helps!

[thany]

I'm just running into this as well. It indicates ALL my fonts are not used within a few seconds. But that's not actually true - one of them definitely is being used. I can see it, like with my eyes and everything. So why does it say it's not used?

I suspect it's because the resource is not used, because the request, as the network tab revealed, is cached. But then, I wonder why these warnings are relevant for resources are are already in the cache 🤨 Or, I'm totally overshooting the cause here.

[icyJoseph]

version? It must be the same exact url, queries and all, maybe your stylesheets request a different font? do you see double requests?

[thany]

If my stylesheet would request a different font, I would see it in the network tab. There is only the set of cached requests (for regular, bold, italic, bold+italic variants).

If I disable preload, the requests don't change and the warnings go away.

[icyJoseph]

Yeah exactly, so no double/duplicated requests.

If I disable preload

How are you doing that exactly? Not using next/font?

[thany]

Like this:

import localFont from 'next/font/local';

const Font = localFont({
  src: [ /* sources */ ],
  preload: false,
});

[icyJoseph]

Well, I can't repro with a local font, testing locally with build+start though, and Next 16.