Nuxt•2mo 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 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 700 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.

Jump to solution

3 Replies

kapa.ai•2mo ago

Hi @Tom. 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;
}

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

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

kapa.ai•2mo ago

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

Solution

Tom•2mo ago

Answer

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

Gaming

Programming

nuxt/fonts not loading bold

Did you find this page helpful?