---
title: "Usage"
description: "Use Nuxt Fonts with any CSS framework or library."
canonical_url: "https://nuxt.com/modules/fonts/usage"
---
# Usage

> Use Nuxt Fonts with any CSS framework or library.

## Pure CSS

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

```css [assets/css/fonts.css]
div {
  font-family: 'Inter', sans-serif;
}
```

::note
Note that Nuxt Fonts will only generate CSS for the first font in a `font-family` declaration. Subsequent fonts in the list will be used to generate metrics for font fallbacks.
::

::warning
Inline styles with `font-family` within your `<template>` don't work; only CSS stylesheets are processed. See [when a font isn't picked up](#when-a-font-isnt-picked-up).
::

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

```ts [nuxt.config.ts]
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.

::note
Global families are injected into a single stylesheet loaded on every page, so keep the list short: every visitor downloads the CSS for each one.
::

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

```css [assets/css/fonts.css]
body {
  font-family: 'Inter', sans-serif;
}
```

The default [`weights`](https://nuxt.com/modules/fonts/configuration#weights) of `['400 700']` is already a range. Widen it to make more weights available:

```ts [nuxt.config.ts]
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](https://nuxt.com/modules/fonts/providers#variable-fonts).

For axes other than weight, such as `opsz` or `slnt`, use [`variableAxis`](https://nuxt.com/modules/fonts/configuration#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](https://nuxt.com/modules/fonts/providers#npm) resolves `Inter Variable` when `@fontsource-variable/inter` is installed.
- The [`local` provider](https://nuxt.com/modules/fonts/providers#local) 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:

```css [main.css]
@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`:

```css [main.css]
@theme {
  --default-font-family: "Inter", sans-serif;
}
```

::note
Nuxt Fonts reads the CSS Tailwind generates, so a font is only picked up if it ends up there. A `--font-*` theme variable that is never used by a utility (and is declared with `@theme inline`) is removed by Tailwind before Nuxt Fonts sees it. Use the utility at least once, declare it with `@theme static`, or set the font in `fonts.families` with [`global: true`](#when-a-font-isnt-picked-up).
::

::tip
If you previously set `processCSSVariables` to `true` for Tailwind v4 support, it is no longer needed or recommended for v0.11.0 and above.
::

## UnoCSS

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

```js [uno.config.js]
import { defineConfig } from 'unocss'

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

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

```js
    font: {
      inter: 'Inter',
    },
```


## Sitemap

See the full [sitemap](https://nuxt.com/sitemap.md) for all pages.