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

title, description, framework, links

title	description	framework	links
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

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";
@import "@nuxt/ui";

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

:::

#ui-pro :::div

@import "tailwindcss";
@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
  }
})