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
With Tailwind CSS you specify fonts using 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',
},