Nuxt•9mo ago

nuxt/fonts not loading bold

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;
}

@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

/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

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

doesn't seem to be loading.

Solution

Answer

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

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

Jump to solution

kapa.ai•3/21/25, 3:36 PM

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

kapa.ai•3/21/25, 3:36 PM

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

/public

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

Manually declare the missing font weights

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

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.

Consider using alternative approaches

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

kapa.ai•3/21/25, 3:36 PM

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

----------------------

kapa.ai•3/21/25, 3:36 PM

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

Solution

Tom•3/21/25, 3:39 PM

Answer

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

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