diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index 4f7e57559..57df1b38e 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -10,6 +10,7 @@ import {
   presetIcons,
   presetTypography,
   presetUno,
+  presetWebFonts,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
@@ -25,9 +26,6 @@ export function unocssPreset(): Preset {
         primary: '#099e61',
         context: 'rgba(var(--nui-c-context),%alpha)',
       },
-      fontFamily: {
-        sans: 'Avenir, Helvetica, Arial, sans-serif',
-      },
     }),
     rules: [
       [/^n-(.*)$/, ([, body]: string[], { theme }: RuleContext<Theme>) => {
@@ -177,6 +175,12 @@ export function extendUnocssOptions(user: UnocssNuxtOptions = {}): UnocssNuxtOpt
         },
         // ...(user?.icons || {})
       }),
+      presetWebFonts({
+        fonts: {
+          sans: 'DM Sans',
+          mono: 'DM Mono',
+        },
+      }),
       unocssPreset(),
       ...(user.presets || []),
     ],
diff --git a/packages/devtools-ui-kit/unocss.config.ts b/packages/devtools-ui-kit/unocss.config.ts
deleted file mode 100644
index e048022f3..000000000
--- a/packages/devtools-ui-kit/unocss.config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { extendUnocssOptions } from './src/unocss'
-
-// for IDE support
-export default {
-  ...extendUnocssOptions(),
-  configDeps: [
-    './src/unocss.ts',
-  ],
-}
diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index 203fdb7fd..a649c997a 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -80,7 +80,7 @@ registerCommands(() =>
 </script>
 
 <template>
-  <div fixed inset-0 h-screen w-screen>
+  <div fixed inset-0 h-screen w-screen font-sans>
     <NuxtLoadingIndicator />
     <Notification />
     <NLoading v-if="waiting">
diff --git a/packages/devtools/client/unocss.config.ts b/packages/devtools/client/unocss.config.ts
index 9025c13bd..434a5a576 100644
--- a/packages/devtools/client/unocss.config.ts
+++ b/packages/devtools/client/unocss.config.ts
@@ -31,8 +31,8 @@ export default defineConfig({
     }),
     presetWebFonts({
       fonts: {
-        sans: 'Inter:400,500',
-        mono: 'Fira Code',
+        sans: 'DM Sans',
+        mono: 'DM Mono',
         stylish: 'Caveat',
       },
     }),
@@ -52,4 +52,7 @@ export default defineConfig({
     'simple-icons-nuxtdotjs',
     'bxl-visual-studio',
   ],
+  configDeps: [
+    '../../packages/devtools-ui-kit/src/unocss.ts',
+  ],
 })
diff --git a/uno.config.ts b/uno.config.ts
index 2e522c0f8..2998a572b 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1 +1,11 @@
-export { default } from './packages/devtools/client/unocss.config'
+import { defineConfig } from 'unocss'
+
+import config from './packages/devtools/client/unocss.config'
+
+export default defineConfig({
+  ...config,
+  configDeps: [
+    './packages/devtools-ui-kit/src/unocss.ts',
+    './packages/devtools/client/unocss.config.ts',
+  ],
+})