nuxt fonts

[glossy berry]

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

[glossy berry]

---

Nuxt Fonts can be a bit “invisible” because it works automatically. Here’s a focused checklist you can go through to see why your fonts aren’t loading.

---

1. Confirm Nuxt Fonts is actually enabled

If you installed it manually

Check nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxt/fonts',
  ]
})

If @nuxt/fonts is missing here, the module won’t run at all. [Installation]

If you’re using Nuxt UI

Nuxt UI auto-registers @nuxt/fonts. Only if you explicitly disabled it will it be off:

export default defineNuxtConfig({
  ui: {
    fonts: false
  }
})

If you have fonts: false, Nuxt Fonts is disabled; remove or set it to true. [Nuxt UI fonts]

---

2. Make sure you’re declaring font-family in CSS (not inline)

Nuxt Fonts only processes CSS files, not inline style attributes in templates. [Usage]

For example, in assets/css/main.css:

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

Or with Nuxt UI + Tailwind v4 style:

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Public Sans', sans-serif;
}

Then include that CSS globally in nuxt.config.ts:

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

[Styling fonts; Nuxt UI fonts usage]

---

3. Check how you expect fonts to be resolved

Nuxt Fonts resolves fonts when it sees a font-family in CSS and then:

1. Looks for matching files in public/ (local provider).
2. If not found, tries web providers like Google, Bunny, Fontshare, npm, etc.
3. Injects @font-face and rewrites URLs to /_fonts/.... [Advanced how-it-works]

So:

A. If you’re using local font files

• Put font files in public/, e.g. public/fonts/MyFont.woff2. [Local provider]
• Use a matching font-family name in CSS:

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

Nuxt Fonts will look for MyFont.woff2, myfont.woff2, etc. in public/. [Local provider]

If you wrote your own @font-face and put fonts in assets/, Nuxt Fonts won’t see them. Either:

• Move fonts to public/ and just use font-family (let Nuxt Fonts generate @font-face), or
• Disable Nuxt Fonts for that family with provider: 'none' and manage @font-face yourself. [Configuration families]

B. If you’re expecting Google / Bunny / Fontshare / npm fonts

You usually don’t need to configure anything: just use the font name in CSS:

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

Nuxt Fonts will try providers in order and generate @font-face + /_fonts/... URLs. [Advanced how-it-works]

If you want to force a specific provider or font options:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    families: [
      { name: 'Roboto', provider: 'google' },
    ],
    defaults: {
      weights: [400, 700],
      styles: ['normal', 'italic'],
    }
  }
})

[Configuration defaults & families]

---

4. Verify that CSS is actually loaded

• Ensure your stylesheet with font-family is referenced in nuxt.config.ts via css: [...] or imported in a component/layout. [Styling – css property]
• In the browser devtools:
  • Check Network → CSS: your CSS file should be loaded.
  • Check Network → Fonts: you should see requests to /_fonts/... if Nuxt Fonts is working. [Advanced how-it-works]

If there are no /_fonts requests, Nuxt Fonts either isn’t enabled or isn’t seeing any font-family declarations.

---

5. Optional: providers / assets configuration

If you customized providers or assets, verify you didn’t accidentally disable what you need:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    providers: {
      google: false, // this disables Google Fonts
      // custom: '~/providers/custom'
    },
    assets: {
      prefix: '/_fonts/' // default base URL for served fonts
    }
  }
})

If google: false is set, Google fonts won’t load. [Providers config; assets]

---

If you paste:

• your nuxt.config.ts
• the CSS where you declare font-family
• and where your font files live (if local)

I can point to the exact step that’s breaking.

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