nuxt/fonts not loading bold

[burnt temple]

The output from nuxt/fonts is:

@font-face {
  font-family: 'Switzer';
  src: local("Switzer Regular"), local("Switzer"), url("/switzer-400.woff2") format(woff2);
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: local("Switzer Regular Italic"), local("Switzer Italic"), url("/switzer-400-italic.woff2") format(woff2);
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'GT Flexa';
  src: local("GT Flexa Regular"), local("GT Flexa"), url("/gt-flexa-400.woff2") format(woff2);
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

But in my /public folder I have:

gt-flexa-400.woff2
gt-flexa-700.woff2
switzer-400-italic.woff2
switzer-400.woff2
switzer-700-italic.woff2
switzer-700.woff2

Anything that is has 700 doesn't seem to be loading.

[whole cairn]

Hi @burnt temple. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information you've provided, it appears that Nuxt Fonts is only generating @font-face declarations for the regular (400) weight fonts but not for the bold (700) weight fonts, despite having those files in your /public folder.

The knowledge sources don't provide specific information about this exact issue with Nuxt Fonts not automatically detecting all font weights. However, there are a couple of approaches you can try to resolve this:

1. Manually declare the missing font weights

You can manually add the missing font weights in your CSS:

@font-face {
  font-family: 'Switzer';
  src: local("Switzer Bold"), local("Switzer-Bold"), url("/switzer-700.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer';
  src: local("Switzer Bold Italic"), local("Switzer-Bold-Italic"), url("/switzer-700-italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'GT Flexa';
  src: local("GT Flexa Bold"), local("GT Flexa-Bold"), url("/gt-flexa-700.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

2. Check your font declaration syntax

If you're using a CSS declaration to specify which fonts to load, make sure you're properly indicating all the weights you need. The documentation doesn't provide specific details on how to declare multiple weights with Nuxt Fonts, but you might need to explicitly list all required weights.

3. Consider using alternative approaches

As mentioned in the Nuxt documentation on styling, you can also work with fonts by placing them in your /public/fonts directory and referencing them in your CSS:

@font-face {
  font-family: 'Switzer';
  src: url('/switzer-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

4. Check for font naming consistency

Make sure the font file names match the expected pattern that Nuxt Fonts is looking for. The module might be looking for specific naming conventions.

If you continue to have issues, you might want to check the Nuxt Fonts GitHub repository for any reported issues or additional documentation that might help with this specific problem.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@burnt temple Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[burnt temple]

Answer Please note that the local provider will only attempt to load styles and weights that were configured in the Font Options.