Files
ui/docs/content/1.getting-started/5.fonts.md
Benjamin Canac ba874c9191 docs(app): framework select global (#2719)
Co-authored-by: harlan <harlan@harlanzw.com>
2024-11-25 15:47:52 +01:00

34 lines
859 B
Markdown

---
title: Fonts
description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.'
navigation.framework: nuxt
links:
- label: 'nuxt/fonts'
to: https://github.com/nuxt/fonts
target: _blank
icon: i-simple-icons-github
---
## Usage
Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/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.
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--font-sans: 'Public Sans', sans-serif;
}
```
You can disable the `@nuxt/fonts` module with the `ui.fonts` option in your `nuxt.config.ts`:
```ts [nuxt.config.ts]
export default defineNuxtConfig({
ui: {
fonts: false
}
})
```