@nuxt/fonts requesting the same font multiple times

[joaopedrodcf]

Describe the bug

Hello everyone,

I noticed that multiple requests for the same fonts are being done when using @nuxt/fonts on an enterprise project, and I'm creating this issue to understand if this behavior is the expectation or if it's a bug.

I can see that per css chunk where the font family is used it adds a @font-face to it, this is also explained in the documentation: https://fonts.nuxt.com/advanced

I assume while running a SSR application we have the request cached as explained below, so even if multiple of the same font are requested the final user is not impacted:

I assume the desired expectation would be that the browser would only load the font when it needs it and never duplicate the request, especially if the initiator is the same file

Reproduction

https://stackblitz.com/edit/github-xhg5kfnk-ycuuwukb

Steps to reproduce

Run the following commands to generate static assets and run the application

pnpm i
pnpm generate
npx serve .output/public

The example tries to do a more complex use case for the chunks where we have lazys and components that import other components and with different or similar @font-faces

In the screenshots below we can see the css contains the same @font-face as has been said above and described in the docs

In browser we can see that multiple requests are being made for the same font even if they are

System Info

System:
    OS: macOS 26.2
    CPU: (11) arm64 Apple M3 Pro
    Memory: 7.86 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.21.1 - /Users/user-name/.local/state/fnm_multishells/37733_1769252864148/bin/node
    Yarn: 4.12.0 - /Users/user-name/.local/state/fnm_multishells/37733_1769252864148/bin/yarn
    npm: 10.9.4 - /Users/user-name/.local/state/fnm_multishells/37733_1769252864148/bin/npm
    bun: 1.1.38 - /opt/homebrew/bin/bun
  Browsers:
    Brave Browser: 144.1.86.139
    Chrome: 144.0.7559.97
    Firefox Developer Edition: 147.0
    Safari: 26.2
  npmPackages:
    vite: 8.0.0-beta.10 => 8.0.0-beta.10

Used Package Manager

pnpm

[HummingMind]

I am also having this issue. Using npm instead of pnpm.

Interestingly enough, it seems to only happen if "disable cache" is set in the browser devtools. If you uncheck it, the first request for the font trasnfers the woff2 file, but the second time it's read from cache:

Still not sure why the font is being called twice. During hydration or something? Maybe Daniel can clarify what's going on.

[joaopedrodcf]

yeah without cache you will face this issue, what I endup doing and it may help you @HummingMind was using global: true, in each font, if they are really global it prevents the issue and it also reduce the css of each component as they lose the font-face

[HummingMind]

@joaopedrodcf Thank you for the workaround! 🍻

However, it looks like when you set a font as global, it stops generating fallbacks and no longer preloads the font if you configured preload: true 😢

[HummingMind]

Looks like the first one is initiated from index and the second one is initiated from the css file generated by @nuxt/fonts :

With this configuration:

Not sure why this is. 😢

[HummingMind]

Figured this out.

Nuxt, by default, inlines styles that have a small size footprint into the head element of a page. So, @font-face styles generated by @nuxt/fonts were getting inlined into a style tag inside head and were also being added to external css.

For me, the fix was to disable the inling feature in nuxt.config.ts like this:

  features: {
    inlineStyles: false,
  },

But, realistically, if people want to keep using inlineStyles then @nuxt/fonts should not add the same @font-face fyles into external css if they already were inlined into the head element (not sure if this is feasable).

Thank you! 🍻