Font is not loading

[maxdzin]

Hello guys!

I followed the documentation and tried a couple of settings/scenarios, but cannot make it work in some of my Nuxt projects - the font is not loaded.
There's used tailwindcss, so the font family is specified there;

export default {
  ...
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
      ...
    },
  },
}

but the font is not loaded and just used system default.

I also tried to specify it within my main.scss file (that is specified in nuxt.config.ts, of course):

...
body {
  font-family: Inter, sans-serif;
}

But that doesn't help.
As well as trying some fine-grained settings in the Nuxt config file:

export default defineNuxtConfig({
  ...
  fonts: {
    families: [{ name: 'Inter', provider: 'google' }],
    defaults: {
      weights: [400, 500, 600, 700],
      styles: ['normal', 'italic'],
      subsets: ['latin-ext', 'latin'],
    },
  },
  ...
})

as well as this:

export default defineNuxtConfig({
  ...
  fonts: {
    families: [
      {
        name: 'Inter',
        provider: 'google',
        weights: [400, 500, 600, 700],
        styles: ['normal', 'italic'],
        subsets: ['latin-ext', 'latin'],
      },
    ],
  },
  ...
})

I see there are a few other issues that mention some problems with the variable font (and I'm trying to use Inter which is variable), so I'm not sure if it's related to some variable font support issue (if any) or there is something else.
I would be grateful if you could point this out to me.

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a template for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/fonts/tree/main/example

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[danielroe]

I can't reproduce this. Would you be able to provide a minimal project with this issue?

[maxdzin]

@danielroe sure. I'll share ASAP.

[robokozo]

@maxdzin is it working with nuxt dev during local development?

I reported an issue recently with fonts on twitter and I promised to come up with a reproduction. (@danielroe)
Really nothing fancy at all: https://stackblitz.com/edit/github-29x8jz

nuxt build
nuxt preview

Please note: nuxt dev has the correct font loading

Originally I reported on twitter as potentially an issue with AWS amplify hosting (which you can see deployed here) but as seen in the stack blitz, it isn't loading there on build either.

The font in question is: https://fonts.google.com/specimen/Press+Start+2P
as recommended by https://nostalgic-css.github.io/NES.css/

[danielroe]

@robokozo Published a fix for your situation. Thanks for the reproduction.

@maxdzin I can't reproduce the issue with Inter. If you're able to provide a reproduction, I can likely resolve 🙏

[maxdzin]

@danielroe Thank you, Daniel!

I created a reproduction: https://github.com/maxdzin/nuxt-fonts-test

The problem is that the fonts are not loaded even though they are specified in nuxt.config.ts and tailwind.config.ts.
And there's an error dropped from the start:

ERROR  Could not fetch metadata for Inter from google. fetch failed

and then this warning right after it:

WARN  Could not produce font face declaration from google for font family Inter.

Apart from that issue, I also trying to achieve dynamic font style switching.
Please, look at fonts page in the reproduction repo, and let me know if that is possible to achieve with nuxt/fonts module.
I tried to apply the font by styles - font family and weight, but that's not working.

Environment details:

• Operating System: Linux
• Node Version: v20.11.1
• Nuxt Version: 3.11.1
• CLI Version: 3.11.1
• Nitro Version: 2.9.4
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, fonts
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected]
• Build Modules: -

---

[maxdzin]

@robokozo No, it doesn't work. Neither for dev or build.

[robokozo]

@maxdzin I tried creating a minimal repo with the font you're trying to use + tailwind but it was working correctly for me. https://stackblitz.com/edit/github-qda5kf

[maxdzin]

@robokozo thank you, that seems helps to understand the problem better.

Today I tried to investigate again and here's what I found:
the font family "Inter" is loaded, which is great, but the problem appears with its regular weight - it is shown as a black (900) font instead of regular (400).

And that setup seems related to the environment:
@robokozo in Stackblitz you shared there's used node v18 and npm as a package manager.

I tried to use Codesandbox, where node v20.9.0 and pnpm package manager is used. And there is where we can reproduce that issue.
@danielroe take a look. please, at this reproduction:
https://codesandbox.io/p/devbox/youthful-butterfly-36fxdj

[maxdzin]

Update

I've managed to resolve this issue by some changes in tailwind config:

export default <Partial<Config>>{
  ...
  theme: {
    extend: {
      ...
      fontFamily: {
-       sans: ['Inter', ...defaultTheme.fontFamily.sans],
+       sans: ['"Inter var"', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  ...
}

I'm not sure about the difference between specifying 'Inter' or 'Inter var': whether that's not a problem with this module and it is the right behavior, or there's something to consider regarding that. So, I'll try to investigate later.

[danielroe]

This seems to be working fine for me with node v20.12.2 and pnpm. I suspect it's a caching issue or was fixed subsequently to your reproduction.

I'm going to close this but if you can reproduce again, please do let me know and I'll reopen. 🙏

[maxdzin]

@danielroe Thank you 🙏
So, as mentioned above, after changing the tailwind configuration, it started working fine.