Usage

Pure CSS

You can use Nuxt Fonts with pure CSS by adding font-family declarations to your CSS:

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

When a font isn't picked up

Nuxt Fonts resolves fonts by scanning the CSS your project generates for font-family declarations. A font that's never named in that CSS is never resolved, so no @font-face rule is emitted and the browser falls back to a system font.

Common places a font stays invisible to the scan:

• a style attribute in a template, or any other inline style
• a font-family inside an SVG, whether served from public/ or imported as an asset
• a Tailwind v4 --font-* theme variable declared with @theme inline that no utility uses, which Tailwind drops before Nuxt Fonts sees it
• a font named only at runtime, such as a family a user chooses and you apply through a CSS variable
• a font set by CSS-in-JS, a third-party stylesheet, or a framework preset that isn't part of your own CSS

For all of these, declare the family with global: true and Nuxt Fonts emits its @font-face rules whether or not it finds a use for them:

export default defineNuxtConfig({
  fonts: {
    families: [
      { name: 'Anton', provider: 'google', global: true },
    ],
  },
})

You can then use font-family: 'Anton' anywhere, including in places Nuxt Fonts never scans.

Variable fonts

To use a variable font, refer to it by its plain family name and request a weight range. The variable version of a family doesn't have a separate name, so font-family: 'Inter' resolves to a variable font from any provider that has one:

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

The default weights of ['400 700'] is already a range. Widen it to make more weights available:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    families: [
      { name: 'Inter', weights: ['100 900'] },
    ],
  },
})

Providers handle a weight range differently:

• google and fontsource serve a variable font when the family has one. Google Fonts narrows it to the requested range; Fontsource serves the family's full weight axis.
• fontshare serves a variable font when the range covers the family's full weight axis, and a static file for each weight in the range otherwise.
• bunny and adobe serve static files only: the lightest weight in the range, the weight closest to 400, and the heaviest.
• local uses a file whose name marks it as variable, and otherwise static files for each end of the range. See variable fonts with the local provider.

For axes other than weight, such as opsz or slnt, use variableAxis.

Names such as Inter Variable or InterVariable

Some distributions give a variable font its own family name, such as InterVariable in the CSS from Inter's website, or Inter Variable in @fontsource-variable/inter. Remote providers don't recognise these names. A font-family that uses one isn't resolved, no warning is logged, and the browser falls back to the next font in the stack.

Use the plain family name unless you're serving the font yourself:

• The npm provider resolves Inter Variable when @fontsource-variable/inter is installed.
• The local provider matches InterVariable.woff2 to both font-family: 'InterVariable' and font-family: 'Inter'.

Because only the first family in a font-family list is resolved, a stack such as 'Inter var', 'Inter', sans-serif doesn't load Inter either. Put the family you want resolved first.

Tailwind CSS

With Tailwind CSS you specify fonts using a CSS variable:

@theme {
  --font-display: "Inter", "sans-serif";
}

Overriding Tailwind's default font family works too, including via @theme inline, which compiles --font-sans down to --default-font-family:

@theme {
  --default-font-family: "Inter", sans-serif;
}

UnoCSS

You can use Nuxt Fonts with UnoCSS by setting fontFamily in your configuration file:

import { defineConfig } from 'unocss'

export default defineConfig({
  theme: {
    fontFamily: {
      inter: 'Inter',
    },
  },
})

If you're using the Wind4 (Tailwind4) preset, set font instead of fontFamily.

    font: {
      inter: 'Inter',
    },