Open ojvribeiro opened 1 month ago
Hello, @ojvribeiro! I'm here to assist you with any questions or issues you have. Let's tackle this one together!
The @nuxtjs/tailwindcss
module does not automatically detect all font weights. By default, it may only recognize common weights like 400
(normal) and 700
(bold). To use additional font weights, you need to specify them manually in your CSS using the @font-face
rule.
Here's an example of how you can define custom font weights:
@font-face {
font-family: 'Roboto';
src: url('/path/to/roboto-regular.woff2') format('woff2'),
url('/path/to/roboto-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('/path/to/roboto-bold.woff2') format('woff2'),
url('/path/to/roboto-bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('/path/to/roboto-medium.woff2') format('woff2'),
url('/path/to/roboto-medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
You can then use these weights in your Tailwind CSS classes:
<span class="font-roboto">...</span>
<span class="font-roboto font-bold">...</span>
<span class="font-roboto font-medium">...</span>
This approach ensures that all specified font weights are available for use in your project [1].
To continue talking to Dosu, mention @dosu.
What bot says is partly correct. @nuxt/fonts
just does the @font-face
injection for you, please refer to this tailwind docs for instructions on using different font weights.
@qwerzl I think my question remains: can the module detect font weights besides 400 and 700?
As I showed in my code example, weights like font-medium
or font-semibold
don't work out of the box (unless I explicitly set them on nuxt.config). Only font-bold
(and the default font-normal
) seem to work without explicit configuration.
I created this repro: https://stackblitz.com/edit/nuxt-starter-pngpso?file=app.vue
Edit: by creating the reproduction, I noticed that it doesn't work if I use a custom font-family utility class created in tailwind.config
(eg: font-roboto
).
with font-roboto:
without font-roboto:
Hi @ojvribeiro , I noticed the same behavior. I even suspected it was because the download of the font file failed. 😂😂😂
Now I added the configuration about font weight in the nuxt.config.ts
, which solved the problem.
fonts: {
defaults: {
weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
},
},
From my testings, only weights
400
(normal) and700
(bold) are available out of the box by using the@nuxtjs/tailwindcss
module like this:Am I missing something, or do I do have to specify the other weights in the module options?