diff --git a/web/src/App.vue b/web/src/App.vue
index 078b0c4de..53b3b4c34 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -54,7 +54,6 @@ export default defineComponent({
 
 <style scoped>
 .app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 3d20908b4..956089d99 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -22,6 +22,17 @@ export default defineConfig({
       },
       stroke: (theme) => theme('colors'),
       fill: (theme) => theme('colors'),
+      fontFamily: [
+        'system-ui',
+        '-apple-system',
+        'Segoe UI',
+        'Roboto',
+        'Helvetica Neue',
+        'Noto Sans',
+        'Liberation Sans',
+        'Arial',
+        'sans-serif',
+      ],
     },
   },
   plugins: [typography],