nuxt
Adding fonts like "Quiksand" and "Urbanist" fails
Fonts like "Quiksand" and "Urbanist" failing in deployed project. But "Poppins" it adds correctly.
I was happy to easily can choose so much fonts in local development but in deployed project it fails. Hoping it will be fixed soon....
Hey @dhillweb! I'm here to help you with any bugs, questions, or contributions you have while waiting for a human maintainer. Let's tackle this font issue together!
The issue with "Quiksand" and "Urbanist" fonts failing to load in the deployed project while "Poppins" works correctly could be due to the way Nuxt Fonts processes and resolves fonts. Nuxt Fonts uses a provider called fontsource to fetch font metadata and details. If "Quiksand" and "Urbanist" are not recognized by the fontsource provider, they will fail to load. This could happen if these fonts are not available in the fontsource metadata or if there is an error fetching their details.
To resolve this issue, ensure that "Quiksand" and "Urbanist" are supported by the fontsource provider. You can verify this by checking the fontsource metadata or by explicitly configuring these fonts in your Nuxt configuration. Additionally, you can handle errors more gracefully by logging them and providing fallback options if the fonts are not available [1][2].
To continue talking to Dosu, mention @dosu.
![dosubot[bot] avatar](https://avatars.githubusercontent.com/in/324583?v=4 "Published by a pub.dev verified publisher"){kind=small}
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:
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
You can just add the CSS and links in the head section of Nuxt's config:
- https://nuxt.com/docs/api/nuxt-config#head
Would you be able to provide a reproduction? 🙏
More info
https://stackblitz.com/edit/nuxt-starter-71tsjv?embed=1&file=README.md
Would you be able to provide a reproduction? 🙏 More info
https://stackblitz.com/edit/nuxt-starter-71tsjv?embed=1&file=README.md
@aidedee
I'm not able to reproduce on my side. Would you provide more details?
Right. On Stackblitz I've observed fetch issues caused by CORS. I'm not too familiar with Stackblitz personally, but please try this out.
This seems to work fine locally, and in Stackblitz with the cors proxy that @qwerzl recommends
I was choosing to add the font without the module. I don't know how it works in deployment with this workaround.
Locally the fonts are showing up with or without the workaround.
Thank you very much
;)
Seems to be working fine, then, right?
I think we can close it - maybe it was an issue with an earlier version of the module.