feat(UI): Font Selection

index.html

@@ -2087,6 +2087,22 @@
                                         <button class="btn-secondary" id="reset-custom-theme">Reset</button>
                                     </div>
                                 </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Font</span>
+                                        <span class="description">Choose the application font</span>
+                                    </div>
+                                    <select id="font-select">
+                                        <option value="'Inter', sans-serif">Inter (Default)</option>
+                                        <option value="'Roboto', sans-serif">Roboto</option>
+                                        <option value="'Open Sans', sans-serif">Open Sans</option>
+                                        <option value="'Lato', sans-serif">Lato</option>
+                                        <option value="'Montserrat', sans-serif">Montserrat</option>
+                                        <option value="'Poppins', sans-serif">Poppins</option>
+                                        <option value="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif">System UI</option>
+                                        <option value="monospace">Monospace</option>
+                                    </select>
+                                </div>
                                 <div class="setting-item">
                                     <div class="info">
                                         <span class="label">Waveform Seekbar</span>

js/app.js

@@ -1432,6 +1432,20 @@ document.addEventListener('DOMContentLoaded', async () => {
         showKeyboardShortcuts();
     });
 
+    // Font Settings
+    const fontSelect = document.getElementById('font-select');
+    if (fontSelect) {
+        const savedFont = localStorage.getItem('monochrome-font');
+        if (savedFont) {
+            fontSelect.value = savedFont;
+        }
+        fontSelect.addEventListener('change', (e) => {
+            const font = e.target.value;
+            document.documentElement.style.setProperty('--font-family', font);
+            localStorage.setItem('monochrome-font', font);
+        });
+    }
+
     // Listener for Pocketbase Sync updates
     window.addEventListener('library-changed', () => {
         const path = window.location.pathname;

js/ui.js

@@ -42,6 +42,8 @@ import {
     createProjectCardHTML,
     createTrackFromSong,
 } from './tracker.js';
+const savedFont = localStorage.getItem('monochrome-font');
+if (savedFont) document.documentElement.style.setProperty('--font-family', savedFont);
 
 function sortTracks(tracks, sortType) {
     if (sortType === 'custom') return [...tracks];

styles.css

@@ -280,7 +280,7 @@ html {
 body {
     background-color: var(--background);
     color: var(--foreground);
-    font-family: Inter, sans-serif;
+    font-family: var(--font-family, 'Inter', sans-serif);
     overflow: hidden;
     transition:
         background-color 0.3s ease,