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;
}

Tailwind CSS

v3 and below

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

export default {
  theme: {
    extend: {
      fontFamily: {
        custom: ['Inter'],
      },
    },
  },
}

v4 (experimental)

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

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

As it uses CSS variables, you should enable the Nuxt Fonts processCSSVariables experimental feature to enable support for processing CSS variables for font family names:

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

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