feat: add live preview of reading font in settings

- Add preview section showing Lorem Ipsum passage
- Preview updates instantly when font is changed
- Load font dynamically for preview
- Style preview to match reader appearance
- Helps users see font changes before saving

src/components/Settings.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes, faSave, faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../services/settingsService'
 import IconButton from './IconButton'
+import { loadFont, getFontFamily } from '../utils/fontLoader'
 
 interface SettingsProps {
   settings: UserSettings
@@ -18,10 +19,19 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
     setLocalSettings(settings)
   }, [settings])
 
+  useEffect(() => {
+    // Load font for preview when it changes
+    if (localSettings.readingFont) {
+      loadFont(localSettings.readingFont)
+    }
+  }, [localSettings.readingFont])
+
   const handleSave = async () => {
     await onSave(localSettings)
   }
 
+  const previewFontFamily = getFontFamily(localSettings.readingFont)
+
   return (
     <div className="settings-view">
       <div className="settings-header">
@@ -97,6 +107,22 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
             </select>
           </div>
 
+          <div className="setting-preview">
+            <div className="preview-label">Preview</div>
+            <div 
+              className="preview-content" 
+              style={{ fontFamily: previewFontFamily }}
+            >
+              <h3>The Quick Brown Fox</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+              </p>
+              <p>
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+              </p>
+            </div>
+          </div>
+
           <div className="setting-group">
             <label htmlFor="showUnderlines" className="checkbox-label">
               <input

src/index.css

@@ -1487,6 +1487,39 @@ body {
   gap: 0.5rem;
 }
 
+.setting-preview {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+}
+
+.preview-label {
+  font-size: 0.875rem;
+  color: #999;
+  margin-bottom: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.preview-content {
+  color: #ddd;
+  line-height: 1.7;
+}
+
+.preview-content h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+  color: #fff;
+}
+
+.preview-content p {
+  margin: 0.75rem 0;
+  font-size: 1rem;
+}
+
 .setting-select {
   width: 100%;
   padding: 0.5rem;