N
Nuxt•2mo ago
kora

Nuxt fonts only load one font

Nuxt fonts only load one font when i try to load two font only one working fonts: { defaults: { preload: true }, families: [ { name: 'MAutotune', src: '/fonts/Saans-Medium.woff2', weight: 'medium' }, { name: 'NTM Regular', src: '/fonts/Saans-Regular.woff2', weight: 'regular' } ], },
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @kora. 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 provided in the knowledge sources, I don't have enough specific details to directly address why only one font is loading in your Nuxt configuration. However, I can provide some guidance based on the available information about fonts and styling in Nuxt. The configuration you've shown doesn't match the standard Nuxt Google Fonts module configuration. Instead, it appears you're trying to use local font files. For local fonts in Nuxt, the recommended approach is slightly different. Here's how you can modify your setup: 1. Place your font files in the public/fonts/ directory of your Nuxt project. 2. Create a CSS file (e.g., assets/css/fonts.css) to define your font faces: 
@font-face {
  font-family: 'MAutotune';
  src: url('/fonts/Saans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NTM Regular';
  src: url('/fonts/Saans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MAutotune';
  src: url('/fonts/Saans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NTM Regular';
  src: url('/fonts/Saans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
3. In your nuxt.config.ts, include this CSS file: 
export default defineNuxtConfig({
  css: ['~/assets/css/fonts.css'],
  // ... other configurations
})
export default defineNuxtConfig({
  css: ['~/assets/css/fonts.css'],
  // ... other configurations
})
This approach is based on the information from the Nuxt documentation on styling. If you're specifically trying to use the Nuxt Google Fonts module, the configuration would be different. For Google Fonts, you would use a configuration like this in your nuxt.config.ts: 
export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts'],
  googleFonts: {
    families: {
      'Font Name 1': true,
      'Font Name 2': true,
    }
  }
})
export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts'],
  googleFonts: {
    families: {
      'Font Name 1': true,
      'Font Name 2': true,
    }
  }
})
This is based on the information from the Nuxt documentation on leveraging layouts for multiple styles. If you're still experiencing issues after trying these approaches, it might be helpful to check your browser's network tab to see if the font files are being loaded correctly, and to ensure there are no CSS conflicts preventing the fonts from being applied. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@637669517811515415> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?