Comments (12)
@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? 🙏
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:
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.
Related Issues (20)
- Adobe font provider does not support dynamic subset HOT 1
- devtools: If the module contains "@nuxt/devtools", an error occurs in the Fonts panel. HOT 9
- Add support for font-stretch HOT 1
- This font won't work on production: DM Serif Display HOT 2
- Strategy to use fonts installed as npm packages HOT 2
- Add support for Google Material Symbols HOT 2
- Allow specifying text for font families HOT 1
- Support Tailwind CSS v4 HOT 2
- Allow downloading priority by extensions
- nuxt/fonts does not honour the nuxt baseUrl setting HOT 3
- Cannot start nuxt: Failed to get devtools context. HOT 1
- Fonts discovered in bundle generation don't generate preload tags
- Two local fonts familly, Only one legible HOT 5
- woff2 should be first in local fonts HOT 1
- Font is not loading if the same font is registered in Font Book. HOT 2
- feat: fontsource provider HOT 1
- Variable Fonts? HOT 4
- ERROR: Could not download font metadata
- Nuxt baseURL ignored when resolving cached font path HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fonts.