diff --git a/docs/app.vue b/docs/app.vue
index 48d441a4..afe162a3 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="antialiased font-sans">
     <nav class="u-bg-white border-b u-border-gray-200 fixed top-0 inset-x-0 z-10">
       <UContainer padded>
         <div class="flex items-center justify-between h-16">
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 935ae28a..288abf03 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -1,3 +1,5 @@
+/* @unocss-include */
+
 import { defineNuxtConfig } from 'nuxt3'
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
@@ -7,20 +9,15 @@ export default defineNuxtConfig({
     meta: [
       { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
     ],
+    link: [
+      { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
+    ],
     htmlAttrs: {
       class: 'u-bg-white'
     },
     bodyAttrs: {
       class: 'u-bg-gray-50 u-text-gray-700'
-    },
-    link: [
-      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
-      {
-        rel: 'stylesheet',
-        href: 'https://fonts.googleapis.com/css2?family=Inter&family=Fira+Code&display=swap'
-      }
-    ]
+    }
   },
   buildModules: [
     '../src'
@@ -32,8 +29,7 @@ export default defineNuxtConfig({
     unocss: {
       theme: {
         fontFamily: {
-          sans: '\'Inter\', sans-serif',
-          mono: '\'Fira Code\', monospace'
+          sans: '"Inter var", sans-serif'
         }
       }
     }