Nuxt•3mo ago

How do we use nuxt/fonts with local otf files ?

Hi guys! I have to use local font files in my nuxt project. I tried to make an configuration like this :

export default defineNuxtConfig({
  ...
  modules: [..., '@nuxt/fonts'],
  fonts: {
    local: {},
    defaults: {
      weights: [400, 500, 600, 700, 800],
      styles: ['normal', 'italic']
    }
  }
})

export default defineNuxtConfig({
  ...
  modules: [..., '@nuxt/fonts'],
  fonts: {
    local: {},
    defaults: {
      weights: [400, 500, 600, 700, 800],
      styles: ['normal', 'italic']
    }
  }
})

I have move all my necessary font files in /public/_fonts directory, but when I apply font on my element it doesn't work: /public/_fonts/My Font.otf font-family: 'My Font'

3 Replies

kapa.ai•3mo ago

Hi @David. 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 specific details about using @nuxt/fonts module with local OTF files. However, I can provide you with an alternative approach to use local fonts in your Nuxt project based on the available information. Here's how you can use local font files in your Nuxt project: 1. Place your font files in the public/ directory. In your case, you've already done this by putting them in /public/_fonts. 2. Create a CSS file in your assets/ directory, for example assets/css/fonts.css, and define your font face:

@font-face {
  font-family: 'My Font';
  src: url('/_fonts/My Font.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'My Font';
  src: url('/_fonts/My Font.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

3. In your nuxt.config.ts, add this CSS file to the global styles:

export default defineNuxtConfig({
  css: ['~/assets/css/fonts.css']
})

export default defineNuxtConfig({
  css: ['~/assets/css/fonts.css']
})

4. Now you can use your font in your components or global CSS:

body {
  font-family: 'My Font', sans-serif;
}

body {
  font-family: 'My Font', sans-serif;
}

This approach is based on the information from the Nuxt documentation on styling and working with fonts (https://nuxt.com/docs/getting-started/styling#working-with-fonts). If you specifically want to use the @nuxt/fonts module, you might need to check its documentation for details on how to configure local fonts, as the provided knowledge sources don't contain information about this specific module's usage with local fonts. Remember that when using local fonts, make sure the font file names and paths are correct, and that you're using the appropriate format in your @font-face declaration (opentype for OTF files). If this doesn't solve your issue, you might want to check if there's a bug or limitation with the @nuxt/fonts module. In that case, you can refer to the Nuxt bug reporting guidelines (https://nuxt.com/docs/community/reporting-bugs) for next steps. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

DavidOP•3mo ago

But I said that I use nuxt/fonts module

Gaming

Programming

How do we use nuxt/fonts with local otf files ?

Did you find this page helpful?