detect font weights automatically

[ojvribeiro]

From my testings, only weights 400 (normal) and 700 (bold) are available out of the box by using the @nuxtjs/tailwindcss module like this:

<span class="font-roboto">...</span> <!-- Works -->

<span class="font-roboto font-bold">...</span> <!-- Works -->

<span class="font-roboto font-medium">...</span> <!-- Doesn't work -->

font-roboto is defined in tailwind.config.

Am I missing something, or do I do have to specify the other weights in the module options?

[dosubot[bot]]

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.

[qwerzl]

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.

[ojvribeiro]

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

[yb]

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],
    },
  },

[rijkvanzanten]

@danielroe In the meantime, would it be worth highlighting this a little more prominent in the documentation? I too found myself struggling as to why my bold fonts weren't showing up only to realize the module's default configuration only pulls in the normal weight 🤔 I'll open up a PR with a docs suggestion to hopefully smoothen this out a bit for fellow local provider users

[danielroe]

thank you! that would be great