Usage - Nuxt Fonts

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.

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. Read more here.

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',
    },
  },
})

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.