feat: add global font settings with per-project override

- Add fontFamilySans and fontFamilyMono to GlobalSettings type
- Add global font state and actions to app store
- Update getEffectiveFontSans/Mono to fall back to global settings
- Add font selectors to global Settings → Appearance
- Add "Use Global Font" checkboxes in Project Settings → Theme
- Add fonts to settings sync and migration
- Include fonts in import/export JSON

apps/ui/src/components/views/settings-view/appearance/appearance-section.tsx

@@ -1,8 +1,21 @@
 import { useState } from 'react';
 import { Label } from '@/components/ui/label';
-import { Palette, Moon, Sun } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Palette, Moon, Sun, Type } from 'lucide-react';
 import { darkThemes, lightThemes } from '@/config/theme-options';
+import {
+  UI_SANS_FONT_OPTIONS,
+  UI_MONO_FONT_OPTIONS,
+  DEFAULT_FONT_VALUE,
+} from '@/config/ui-font-options';
 import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
 import type { Theme } from '../shared/types';
 
 interface AppearanceSectionProps {
@@ -12,9 +25,22 @@ interface AppearanceSectionProps {
 
 export function AppearanceSection({ effectiveTheme, onThemeChange }: AppearanceSectionProps) {
   const [activeTab, setActiveTab] = useState<'dark' | 'light'>('dark');
+  const { fontFamilySans, fontFamilyMono, setFontSans, setFontMono } = useAppStore();
 
   const themesToShow = activeTab === 'dark' ? darkThemes : lightThemes;
 
+  // Convert null to 'default' for Select component
+  const fontSansValue = fontFamilySans || DEFAULT_FONT_VALUE;
+  const fontMonoValue = fontFamilyMono || DEFAULT_FONT_VALUE;
+
+  const handleFontSansChange = (value: string) => {
+    setFontSans(value === DEFAULT_FONT_VALUE ? null : value);
+  };
+
+  const handleFontMonoChange = (value: string) => {
+    setFontMono(value === DEFAULT_FONT_VALUE ? null : value);
+  };
+
   return (
     <div
       className={cn(
@@ -102,6 +128,77 @@ export function AppearanceSection({ effectiveTheme, onThemeChange }: AppearanceS
             })}
           </div>
         </div>
+
+        {/* Fonts Section */}
+        <div className="space-y-4 pt-6 border-t border-border/50">
+          <div className="flex items-center gap-2 mb-4">
+            <Type className="w-4 h-4 text-muted-foreground" />
+            <Label className="text-foreground font-medium">Fonts</Label>
+          </div>
+          <p className="text-xs text-muted-foreground -mt-2 mb-4">
+            Set default fonts for all projects. Individual projects can override these settings.
+          </p>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* UI Font Selector */}
+            <div className="space-y-2">
+              <Label htmlFor="global-ui-font-select" className="text-sm">
+                UI Font
+              </Label>
+              <Select value={fontSansValue} onValueChange={handleFontSansChange}>
+                <SelectTrigger id="global-ui-font-select" className="w-full">
+                  <SelectValue placeholder="Default (Geist Sans)" />
+                </SelectTrigger>
+                <SelectContent>
+                  {UI_SANS_FONT_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      <span
+                        style={{
+                          fontFamily:
+                            option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
+                        }}
+                      >
+                        {option.label}
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                Used for headings, labels, and UI text
+              </p>
+            </div>
+
+            {/* Code Font Selector */}
+            <div className="space-y-2">
+              <Label htmlFor="global-code-font-select" className="text-sm">
+                Code Font
+              </Label>
+              <Select value={fontMonoValue} onValueChange={handleFontMonoChange}>
+                <SelectTrigger id="global-code-font-select" className="w-full">
+                  <SelectValue placeholder="Default (Geist Mono)" />
+                </SelectTrigger>
+                <SelectContent>
+                  {UI_MONO_FONT_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      <span
+                        style={{
+                          fontFamily:
+                            option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
+                        }}
+                      >
+                        {option.label}
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                Used for code blocks and monospaced text
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );