Font is not loading about fonts HOT 12 CLOSED

@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 🙏

from fonts.

@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

from fonts.

@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

from fonts.

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.

from fonts.

Would you be able to provide a reproduction? 🙏

from fonts.

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

from fonts.

@danielroe sure. I'll share ASAP.

from fonts.

@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/

from fonts.

@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: -

from fonts.

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

from fonts.

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. 🙏

from fonts.

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

from fonts.