diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 33ca3b3e..0ba2928c 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -29,9 +29,8 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
 
   useEffect(() => {
     // Load font for preview when it changes
-    if (localSettings.readingFont) {
-      loadFont(localSettings.readingFont)
-    }
+    const fontToLoad = localSettings.readingFont || 'source-serif-4'
+    loadFont(fontToLoad)
   }, [localSettings.readingFont])
 
   // Auto-save settings whenever they change (except on initial mount)
@@ -44,7 +43,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
     onSave(localSettings)
   }, [localSettings, onSave])
 
-  const previewFontFamily = getFontFamily(localSettings.readingFont)
+  const previewFontFamily = getFontFamily(localSettings.readingFont || 'source-serif-4')
 
   return (
     <div className="settings-view">
@@ -66,7 +65,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
             <div className="setting-group setting-inline">
               <label htmlFor="readingFont">Reading Font</label>
               <FontSelector
-                value={localSettings.readingFont || 'system'}
+                value={localSettings.readingFont || 'source-serif-4'}
                 onChange={(font) => setLocalSettings({ ...localSettings, readingFont: font })}
               />
             </div>
diff --git a/src/index.css b/src/index.css
index 17dc561e..99dae0db 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,7 +13,7 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
   
-  --reading-font: system-ui, -apple-system, sans-serif;
+  --reading-font: 'Source Serif 4', serif;
   --reading-font-size: 16px;
   /* Layout variables */
   --sidebar-width: 320px;