diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index cecfa696..8e943fa0 100644
--- a/src/components/Settings.tsx
+++ b/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
diff --git a/src/index.css b/src/index.css
index 61a49b62..92710264 100644
--- a/src/index.css
+++ b/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;