ui/docs/content/1.getting-started/5.fonts.md

title, description, framework, links, navigation.icon

title	description	framework	links	navigation.icon
Fonts	Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.	nuxt	label to target icon nuxt/fonts https://github.com/nuxt/fonts _blank i-simple-icons-github	i-lucide-a-large-small

Usage

Nuxt UI automatically registers the @nuxt/fonts module for you, so there's no additional setup required. To use a font in your Nuxt UI application, you can simply declare it in your CSS. It will be automatically loaded and optimized for you.

::module-only #ui :::div

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme {
  --font-sans: 'Public Sans', sans-serif;
}

:::

#ui-pro :::div

@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

@theme {
  --font-sans: 'Public Sans', sans-serif;
}

::: ::

You can disable the @nuxt/fonts module with the ui.fonts option in your nuxt.config.ts:

export default defineNuxtConfig({
  ui: {
    fonts: false
  }
})