fix: ensure fonts are fully loaded before applying styles

- Convert loadFont to async function that returns a Promise
- Use Font Loading API to wait for fonts to be actually ready
- Add comprehensive logging for font loading stages
- Wait for font loading in useSettings before applying CSS variables
- Update Settings component to handle async font loading
- Prevents FOUT (Flash of Unstyled Text) by ensuring fonts are ready
- Fixes timing issue where custom fonts weren't being applied consistently

This ensures custom fonts are fully loaded and ready before being applied,
eliminating the race condition where content would render with system fonts
before custom fonts were available.

src/hooks/useSettings.ts

@@ -43,16 +43,32 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
 
   // Apply settings to document
   useEffect(() => {
-    const root = document.documentElement.style
-    const fontKey = settings.readingFont || 'system'
-    if (fontKey !== 'system') loadFont(fontKey)
-    root.setProperty('--reading-font', getFontFamily(fontKey))
-    root.setProperty('--reading-font-size', `${settings.fontSize || 18}px`)
+    const applyStyles = async () => {
+      const root = document.documentElement.style
+      const fontKey = settings.readingFont || 'system'
+      
+      console.log('🎨 Applying settings styles:', { fontKey, fontSize: settings.fontSize })
+      
+      // Load font first and wait for it to be ready
+      if (fontKey !== 'system') {
+        console.log('⏳ Waiting for font to load...')
+        await loadFont(fontKey)
+        console.log('✅ Font loaded, applying styles')
+      }
+      
+      // Apply font settings after font is loaded
+      root.setProperty('--reading-font', getFontFamily(fontKey))
+      root.setProperty('--reading-font-size', `${settings.fontSize || 18}px`)
+      
+      // Set highlight colors for three levels
+      root.setProperty('--highlight-color-mine', settings.highlightColorMine || '#ffff00')
+      root.setProperty('--highlight-color-friends', settings.highlightColorFriends || '#f97316')
+      root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea')
+      
+      console.log('✅ All styles applied')
+    }
     
-    // Set highlight colors for three levels
-    root.setProperty('--highlight-color-mine', settings.highlightColorMine || '#ffff00')
-    root.setProperty('--highlight-color-friends', settings.highlightColorFriends || '#f97316')
-    root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea')
+    applyStyles()
   }, [settings])
 
   const saveSettingsWithToast = useCallback(async (newSettings: UserSettings) => {