docs(getting-started): update

docs/content/1.getting-started/6.fonts.md

@@ -1,13 +1,42 @@
 ---
-description: ''
+description: 'Nuxt UI integrates seamlessly with `@nuxt/fonts`, providing plug-and-play font optimization for your Nuxt applications.'
 links:
   - label: 'nuxt/fonts'
     to: https://github.com/nuxt/fonts
     target: _blank
     icon: i-simple-icons-github
-navigation:
-  badge:
-    label: Todo
 ---
 
-Thanks to [`@nuxt/fonts`](https://github.com/nuxt/fonts),
+## 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: Inter, sans-serif;
+}
+</style>
+```
+
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-family-sans: Inter, 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.
+::