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