Getting Started

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:

assets/css/fonts.css
div {
  font-family: 'Inter', sans-serif;
}
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.
Inline styles with font-family within your <template> do currently not work; it only processes CSS stylesheets.

Tailwind CSS

v3 and below

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

tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        custom: ['Inter'],
      },
    },
  },
}
If the font name contains an invalid identifier (like a space character), you'll need to wrap it in quotes or escape the character manually.

v4

TailwindCSS v4 brings a brand new way for configuration. In v4 if you want to specify a font, you would use a CSS variable:

main.css
@theme {
  --font-display: "Inter", "sans-serif";
}
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:

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.

    font: {
      inter: 'Inter',
    },

Configuration

Nuxt Fonts works out of the box with zero config, but you can always add some configurations for finer-grained control.

Providers

Font providers are designed to be pluggable and extensible, so no matter your setup you should be able to use an existing provider or write your own.