Problems with Adobe as provider
Closed this issue · 9 comments
Hello,
I have problems using nuxt fonts with Adobe as Provider (and tailwind for css)
This ist the font I want to use and what postman shows me for the correct names:
"families": [
{
"id": "some id",
"name": "DIN 2014",
"slug": "din-2014",
"css_names": [
"din-2014"
],
"css_stack": "\"din-2014\",sans-serif",
"variations": [
"n4",
"n6",
"n7"
]
}
]
}
This is how my tailwind.config.ts looks:
fontFamily: {
custom: ['din-2014', 'sans-serif'],
},
This is how my nuxt.config.ts looks:
fonts: {
families: [{ name: 'din-2014', provider: 'adobe' }],
adobe: {
id: ['some id'],
},
defaults: {
weights: [400],
styles: ['normal', 'italic'],
subsets: [
'cyrillic-ext',
'cyrillic',
'greek-ext',
'greek',
'vietnamese',
'latin-ext',
'latin',
],
fallbacks: {
monospace: ['Tahoma'],
},
},
},
I get this warning with the above code:
I also tried other names like: "DIN 2014" or "Din 2014", but it seems like the font does not get through to the frontend of my nuxt application.
PS: If I use the adobe cdn link everything works fine
Thank you for the help!
newbie
Hello @towa-gregoryHa! I'm here to help you with any bugs, questions, or contributions you may have. Let's work together to resolve the issue you're experiencing.
To resolve the issue with using the "DIN 2014" font from Adobe in your Nuxt application, you need to ensure that the configuration in your nuxt.config.ts and tailwind.config.ts files is correct. Here are the steps to follow:
-
Update
nuxt.config.ts:
Ensure that the Adobe provider configuration is correctly set up and that the font family name matches the one provided by Adobe.export default defineNuxtConfig({ modules: ['@nuxt/fonts', '@nuxtjs/tailwindcss'], fonts: { providers: { adobe: { id: ['<your-adobe-project-id>'], // Replace with your actual Adobe Project ID }, }, families: [ { name: 'DIN 2014', provider: 'adobe' }, // Use the exact name as provided by Adobe ], } })
-
Update
tailwind.config.ts:
Ensure that the font family name in Tailwind matches the one used in the Nuxt configuration.module.exports = { theme: { extend: { fontFamily: { 'custom': ['"DIN 2014"', 'sans-serif'], // Use the exact name as provided by Adobe }, }, }, plugins: [], }
-
Ensure Correct Font Import:
Make sure you are importing the Adobe Fonts CSS correctly in your project. This can be done by adding the import URL in your global CSS file or directly in your HTML.@import url('https://use.typekit.net/<your-adobe-project-id>.css'); // Ensure this URL is correct
-
Check for Errors:
The warning you are seeing indicates that there might be an issue with fetching the font metadata from Adobe. Ensure that your Adobe Project ID is correct and that the font is available in your Adobe Fonts project.
If you continue to face issues, it might be due to known limitations with the Nuxt Fonts module when fetching metadata from Adobe, as indicated by the error handlers in the code [1]. You can also enable additional logging and debugging tools provided by the Nuxt Fonts module to diagnose the issue further [2][3].
By following these steps, you should be able to correctly configure and use the "DIN 2014" font in your Nuxt application with Tailwind CSS.
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:
Please provide a reproduction. "DIN 2014" should be the right name if nothing goes wrong.
Could there be a "reading problem" because in the tailwind config it is:
fontFamily: {
custom: ['din-2014', 'sans-serif'],
},
and in the nuxt config it is "DIN 2014"
so:
din-2014 is not equal to DIN 2014
I also get this msg:
When I set global to true, I get at least the font face declarations injected into the nuxt-fonts-global.css
families: [{ name: 'DIN 2014', provider: 'adobe', global: true }],
Then I can via my main.scss add the DIN 2014 font to the "project" and access it.
@tailwind base;
@layer base {
/*! purgecss start ignore */
html {
font-size: 1em;
font-family: 'DIN 2014', system-ui, sans-serif;
}
}
/*! purgecss end ignore */
But the "tailwind wiring" is still not working!
Any ideas?
We solved it by using this in the tailwind.config.ts
fontFamily: {
custom: ['"DIN 2014"', 'system-ui', 'sans-serif'],
},
Glad you figured it out. As I said in the previous reply, "DIN 2014" should be the right name. Should I close the issue?
Hi qwerzl, yes you can close it of course. But I would mention this somewhere in the docs maybe, because it is a bit tricky I think and you do not use it that way intuitively. (with the '""')