mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-18 05:58:07 +01:00
44 lines
979 B
Markdown
44 lines
979 B
Markdown
---
|
|
title: Fonts
|
|
description: 'Nuxt UI integrates with `@nuxt/fonts` to provide plug-and-play font optimization.'
|
|
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` 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:
|
|
|
|
::code-group
|
|
|
|
```vue [app.vue]
|
|
<style>
|
|
@import "tailwindcss";
|
|
@import "@nuxt/ui";
|
|
|
|
@theme {
|
|
--font-family-sans: 'Public Sans', sans-serif;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
```css [main.css]
|
|
@import "tailwindcss";
|
|
@import "@nuxt/ui";
|
|
|
|
@theme {
|
|
--font-family-sans: 'Public Sans', sans-serif;
|
|
}
|
|
```
|
|
|
|
::
|
|
|
|
That's it! Nuxt Fonts will detect this and you should immediately see the web font loaded in your browser.
|
|
|
|
::tip{to="https://fonts.nuxt.com/advanced" target="_blank"}
|
|
Read more about how `@nuxt/fonts` work behind the scenes to optimize your fonts.
|
|
::
|