feat(web): use self-hosted Inter as Windows default font

apps/web/index.html

@@ -198,6 +198,9 @@
           }
         };
 
+        if (/^win(dows)?/i.test(navigator.platform)) {
+          document.documentElement.classList.add("windows");
+        }
         try {
           const storedTheme = window.localStorage.getItem("t3code:theme");
           const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

apps/web/package.json

@@ -20,6 +20,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@effect/atom-react": "catalog:",
+    "@fontsource-variable/inter": "^5.3.0",
     "@formkit/auto-animate": "^0.9.0",
     "@legendapp/list": "3.3.3",
     "@lexical/react": "^0.41.0",

apps/web/src/appearanceFonts.test.ts

@@ -7,6 +7,7 @@ import {
   clampPromptFontSize,
   DEFAULT_CODE_FONT_STACK,
   DEFAULT_SANS_FONT_STACK,
+  WINDOWS_SANS_FONT_STACK,
   appearanceFontStack,
   cssFontFamilies,
   resolveDefaultFamilyLabel,
@@ -68,6 +69,12 @@ describe("appearanceFontStack", () => {
   it("falls back to the default stack when unset", () => {
     expect(appearanceFontStack("", DEFAULT_SANS_FONT_STACK)).toBe(DEFAULT_SANS_FONT_STACK);
   });
+
+  it("prepends to the Windows stack on Windows so Inter stays in the fallback chain", () => {
+    expect(appearanceFontStack("Cascadia Code", WINDOWS_SANS_FONT_STACK)).toBe(
+      `"Cascadia Code", ${WINDOWS_SANS_FONT_STACK}`,
+    );
+  });
 });
 
 describe("resolveTerminalFontPreference", () => {

apps/web/src/appearanceFonts.ts

@@ -20,6 +20,9 @@ import {
 export const DEFAULT_SANS_FONT_STACK =
   '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
 
+export const WINDOWS_SANS_FONT_STACK =
+  '"Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+
 // Concrete names first: some engines alias `ui-monospace` to the
 // proportional system UI font, which would break every code surface.
 export const DEFAULT_CODE_FONT_STACK =
@@ -100,8 +103,15 @@ export function applyAppearanceFontVariables(
   root: HTMLElement,
   preferences: AppearanceFontPreferences,
 ): void {
+  const windowsSans = root.classList.contains("windows");
   const families: ReadonlyArray<readonly [variable: string, custom: string, fallback: string]> = [
-    ["--font-sans", preferences.sans, DEFAULT_SANS_FONT_STACK],
+    // On Windows the stylesheet default already prefers Inter, so custom
+    // families must prepend to the same stack or glyph fallbacks skip it.
+    [
+      "--font-sans",
+      preferences.sans,
+      windowsSans ? WINDOWS_SANS_FONT_STACK : DEFAULT_SANS_FONT_STACK,
+    ],
     ["--font-mono", preferences.code, DEFAULT_CODE_FONT_STACK],
     // The composer falls back to whatever the sans preference resolves to.
     ["--font-composer", preferences.composer, "var(--font-sans)"],

apps/web/src/components/settings/SettingsPanels.tsx

@@ -75,7 +75,7 @@ import {
   sortProviderInstanceEntries,
 } from "../../providerInstances";
 import { ensureLocalApi, readLocalApi } from "../../localApi";
-import { isMacPlatform } from "../../lib/utils";
+import { isMacPlatform, isWindowsPlatform } from "../../lib/utils";
 import { primaryServerObservabilityAtom, primaryServerProvidersAtom } from "../../state/server";
 import { useProjects } from "../../state/entities";
 import { useArchivedThreadSnapshots } from "../../lib/archivedThreadsState";
@@ -96,6 +96,7 @@ import { Input } from "../ui/input";
 import {
   DEFAULT_CODE_FONT_STACK,
   DEFAULT_SANS_FONT_STACK,
+  WINDOWS_SANS_FONT_STACK,
   isFontFamilyAvailable,
   isMonospaceFamily,
   resolveDefaultFamilyLabel,
@@ -1078,15 +1079,19 @@ export function AppearanceSettingsPanel() {
 
 function useFontDefaultFamilies() {
   const settings = usePrimarySettings();
-  // An unset preference shows the font it resolves to on this machine; the
-  // default stacks are the platform's own faces, so the name is probed, not
-  // hardcoded.
+  const sansStack = isWindowsPlatform(navigator.platform)
+    ? WINDOWS_SANS_FONT_STACK
+    : DEFAULT_SANS_FONT_STACK;
   const defaults = useMemo(
     () => ({
-      sans: resolveDefaultFamilyLabel(DEFAULT_SANS_FONT_STACK) ?? "System default",
+      // The canvas probe cannot measure the bundled Inter webfont before it
+      // renders, so on Windows fall back to naming it directly.
+      sans:
+        resolveDefaultFamilyLabel(sansStack) ??
+        (isWindowsPlatform(navigator.platform) ? "Inter Variable" : "System default"),
       code: resolveDefaultFamilyLabel(DEFAULT_CODE_FONT_STACK) ?? "System monospace",
     }),
-    [],
+    [sansStack],
   );
   return {
     sans: defaults.sans,

apps/web/src/index.css

@@ -1442,6 +1442,11 @@ body {
   --desktop-window-right-resize-inset: 6px;
 }
 
+html.windows {
+  --font-sans:
+    "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+}
+
 /* App-chrome grain. Baked into each surface's own background (behind
    content) rather than a fixed overlay on top: a full-viewport overlay
    forces the compositor to re-blend every frame any animation produces,

apps/web/src/main.tsx

@@ -7,6 +7,7 @@ import { createHashHistory, createBrowserHistory } from "@tanstack/react-router"
 
 import "./index.css";
 
+import "@fontsource-variable/inter/wght.css";
 import { isElectron } from "./env";
 import { ManagedRelayAuthProvider } from "./cloud/managedAuth";
 import { hasCloudPublicConfig } from "./cloud/publicConfig";