Use Inter for app typography (#899)

web/package.json

@@ -16,6 +16,7 @@
     "test:e2e:smoke": "pnpm build && playwright test --project=smoke"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
     "@isomorphic-git/lightning-fs": "^4.6.2",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -37,12 +38,12 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
+    "@tailwindcss/postcss": "^4.3.0",
     "@tanstack/router-plugin": "^1.167.12",
     "@tanstack/virtual-file-routes": "^1.161.7",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^6.0.0",
-    "@tailwindcss/postcss": "^4.3.0",
     "postcss": "^8.5.8",
     "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",

web/src/main.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { App } from "@/app/App";
+import "@fontsource-variable/inter/wght.css";
 import "@/shared/styles/globals.css";
 import { ThemeProvider } from "@/shared/theme/ThemeProvider";
 import { Toaster } from "@/shared/ui/sonner";

web/src/shared/styles/globals.css

@@ -95,6 +95,6 @@
 
   body {
     @apply bg-background text-foreground antialiased;
-    font-family: "Geist", "Avenir Next", "Segoe UI", sans-serif;
+    font-family: "Inter Variable", Inter, "Avenir Next", "Segoe UI", sans-serif;
   }
 }

web/tailwind.config.js

@@ -7,6 +7,15 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      fontFamily: {
+        sans: [
+          '"Inter Variable"',
+          "Inter",
+          '"Avenir Next"',
+          '"Segoe UI"',
+          "sans-serif",
+        ],
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",