From bb039399fc2add9580197f432e8a72053f7dafce Mon Sep 17 00:00:00 2001
From: Developer <dev@local-transcription.local>
Date: Tue, 7 Apr 2026 16:40:52 -0700
Subject: [PATCH] Add font source/family settings matching v1.4.0 feature set

Restored the font configuration that was missing from the Tauri
rewrite. Settings now include:

- Font Source: System Font, Web-Safe, Google Font
- System Font: text input for any installed font family
- Web-Safe: dropdown with 13 universal fonts (Arial, Courier New, etc.)
- Google Font: dropdown with 35 fonts organized by category
  (Sans Serif, Serif, Monospace, Display, Handwriting)
- Font Size: range slider (8-32px)

All font settings are saved to config and applied to the OBS web
display and server sync.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/components/Settings.svelte | 101 +++++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)

diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
index 311ba9b..4e2d566 100644
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -27,6 +27,10 @@
   let showTimestamps = $state(true);
   let fadeSeconds = $state(10);
   let maxLines = $state(100);
+  let fontSource = $state("System Font");
+  let fontFamily = $state("Courier");
+  let websafeFont = $state("Arial");
+  let googleFont = $state("Roboto");
   let fontSize = $state(12);
   let userColor = $state("#4CAF50");
   let textColor = $state("#FFFFFF");
@@ -99,6 +103,10 @@
     showTimestamps = cfg.display.show_timestamps;
     fadeSeconds = cfg.display.fade_after_seconds;
     maxLines = cfg.display.max_lines;
+    fontSource = cfg.display.font_source ?? "System Font";
+    fontFamily = cfg.display.font_family ?? "Courier";
+    websafeFont = cfg.display.websafe_font ?? "Arial";
+    googleFont = cfg.display.google_font ?? "Roboto";
     fontSize = cfg.display.font_size;
     userColor = cfg.display.user_color;
     textColor = cfg.display.text_color;
@@ -174,6 +182,10 @@
         show_timestamps: showTimestamps,
         fade_after_seconds: fadeSeconds,
         max_lines: maxLines,
+        font_source: fontSource,
+        font_family: fontFamily,
+        websafe_font: websafeFont,
+        google_font: googleFont,
         font_size: fontSize,
         user_color: userColor,
         text_color: textColor,
@@ -485,6 +497,95 @@
             bind:value={maxLines}
           />
         </div>
+        <div class="field">
+          <label for="font-source">Font Source</label>
+          <select id="font-source" bind:value={fontSource}>
+            <option value="System Font">System Font</option>
+            <option value="Web-Safe">Web-Safe</option>
+            <option value="Google Font">Google Font</option>
+          </select>
+        </div>
+        {#if fontSource === "System Font"}
+          <div class="field">
+            <label for="font-family">System Font Family</label>
+            <input id="font-family" type="text" bind:value={fontFamily} placeholder="Courier" />
+          </div>
+        {/if}
+        {#if fontSource === "Web-Safe"}
+          <div class="field">
+            <label for="websafe-font">Web-Safe Font</label>
+            <select id="websafe-font" bind:value={websafeFont}>
+              <option value="Arial">Arial</option>
+              <option value="Arial Black">Arial Black</option>
+              <option value="Comic Sans MS">Comic Sans MS</option>
+              <option value="Courier New">Courier New</option>
+              <option value="Georgia">Georgia</option>
+              <option value="Impact">Impact</option>
+              <option value="Lucida Console">Lucida Console</option>
+              <option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
+              <option value="Palatino Linotype">Palatino Linotype</option>
+              <option value="Tahoma">Tahoma</option>
+              <option value="Times New Roman">Times New Roman</option>
+              <option value="Trebuchet MS">Trebuchet MS</option>
+              <option value="Verdana">Verdana</option>
+            </select>
+          </div>
+        {/if}
+        {#if fontSource === "Google Font"}
+          <div class="field">
+            <label for="google-font">Google Font</label>
+            <select id="google-font" bind:value={googleFont}>
+              <optgroup label="Sans Serif">
+                <option value="Roboto">Roboto</option>
+                <option value="Open Sans">Open Sans</option>
+                <option value="Lato">Lato</option>
+                <option value="Montserrat">Montserrat</option>
+                <option value="Poppins">Poppins</option>
+                <option value="Nunito">Nunito</option>
+                <option value="Raleway">Raleway</option>
+                <option value="Ubuntu">Ubuntu</option>
+                <option value="Rubik">Rubik</option>
+                <option value="Work Sans">Work Sans</option>
+                <option value="Inter">Inter</option>
+                <option value="Outfit">Outfit</option>
+                <option value="Quicksand">Quicksand</option>
+                <option value="Comfortaa">Comfortaa</option>
+                <option value="Varela Round">Varela Round</option>
+              </optgroup>
+              <optgroup label="Serif">
+                <option value="Playfair Display">Playfair Display</option>
+                <option value="Merriweather">Merriweather</option>
+                <option value="Lora">Lora</option>
+                <option value="PT Serif">PT Serif</option>
+                <option value="Crimson Text">Crimson Text</option>
+              </optgroup>
+              <optgroup label="Monospace">
+                <option value="Roboto Mono">Roboto Mono</option>
+                <option value="Source Code Pro">Source Code Pro</option>
+                <option value="Fira Code">Fira Code</option>
+                <option value="JetBrains Mono">JetBrains Mono</option>
+                <option value="IBM Plex Mono">IBM Plex Mono</option>
+              </optgroup>
+              <optgroup label="Display">
+                <option value="Bebas Neue">Bebas Neue</option>
+                <option value="Oswald">Oswald</option>
+                <option value="Righteous">Righteous</option>
+                <option value="Bangers">Bangers</option>
+                <option value="Permanent Marker">Permanent Marker</option>
+              </optgroup>
+              <optgroup label="Handwriting">
+                <option value="Pacifico">Pacifico</option>
+                <option value="Lobster">Lobster</option>
+                <option value="Dancing Script">Dancing Script</option>
+                <option value="Caveat">Caveat</option>
+                <option value="Satisfy">Satisfy</option>
+              </optgroup>
+            </select>
+            <p style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">
+              Browse more at <a href="https://fonts.google.com" target="_blank" rel="noopener" style="color: var(--accent-blue);">fonts.google.com</a>
+            </p>
+          </div>
+        {/if}
         <div class="field">
           <label for="font-size">Font Size: {fontSize}px</label>
           <input