add apple music fonts

index.html

@@ -19,6 +19,20 @@
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <meta name="apple-mobile-web-app-title" content="Monochrome" />
         <meta name="description" content="A minimalist music streaming application" />
+
+        <!-- Preconnect to critical third-party origins -->
+        <link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://api.monochrome.tf" crossorigin />
+        <link rel="preconnect" href="https://ws.audioscrobbler.com" crossorigin />
+        <link rel="preconnect" href="https://libre.fm" crossorigin />
+        <link rel="preconnect" href="https://api.listenbrainz.org" crossorigin />
+        <link rel="preconnect" href="https://www.gstatic.com" crossorigin />
+        <link rel="preconnect" href="https://resources.tidal.com" crossorigin />
+        <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+        <link rel="preconnect" href="https://unpkg.com" crossorigin />
+
         <link rel="apple-touch-icon" href="/assets/logo.svg" />
         <link rel="manifest" href="/manifest.json" />
         <link rel="icon" href="/assets/logo.svg" type="image/svg+xml" />
@@ -758,6 +772,7 @@
             <aside class="sidebar">
                 <div class="sidebar-content">
                     <div class="sidebar-logo">
+                        <a href="https://monochrome.tf/" class="sidebar-logo-link">
                             <svg
                                 class="app-logo"
                                 xmlns="http://www.w3.org/2000/svg"
@@ -772,6 +787,7 @@
                                 </g>
                             </svg>
                             <span>Monochrome</span>
+                        </a>
                         <button
                             id="sidebar-toggle"
                             class="btn-icon desktop-only"
@@ -2333,6 +2349,7 @@
                                         <div id="font-preset-section" class="font-section">
                                             <select id="font-preset-select">
                                                 <option value="Inter">Inter (Default)</option>
+                                                <option value="Apple Music">Apple Music</option>
                                                 <option value="IBM Plex Mono">IBM Plex Mono</option>
                                                 <option value="Roboto">Roboto</option>
                                                 <option value="Open Sans">Open Sans</option>

js/settings.js

@@ -1943,6 +1943,8 @@ function initializeFontSettings() {
             );
         } else if (value === 'monospace') {
             fontSettings.loadPresetFont('monospace', 'monospace');
+        } else if (value === 'Apple Music') {
+            fontSettings.loadAppleMusicFont();
         } else {
             fontSettings.loadPresetFont(value, 'sans-serif');
         }

js/storage.js

@@ -1659,6 +1659,41 @@ export const fontSettings = {
         document.documentElement.style.setProperty('--font-family', fontValue);
     },
 
+    loadAppleMusicFont() {
+        const APPLE_FONT_LINK_ID = 'monochrome-apple-font';
+
+        // Remove any existing dynamic font links
+        let existingLink = document.getElementById(this.FONT_LINK_ID);
+        if (existingLink) {
+            existingLink.remove();
+        }
+
+        // Remove any existing @font-face styles
+        let existingStyle = document.getElementById(this.FONT_FACE_ID);
+        if (existingStyle) {
+            existingStyle.remove();
+        }
+
+        // Load Apple font CSS
+        let link = document.getElementById(APPLE_FONT_LINK_ID);
+        if (!link) {
+            link = document.createElement('link');
+            link.id = APPLE_FONT_LINK_ID;
+            link.rel = 'stylesheet';
+            link.href = '/fonts/apple/sf-pro-display.css';
+            document.head.appendChild(link);
+        }
+
+        this.setConfig({
+            type: 'preset',
+            family: 'Apple Music',
+            fallback: 'sans-serif',
+            weights: [400, 500, 600, 700],
+        });
+
+        document.documentElement.style.setProperty('--font-family', "'SF Pro Display', sans-serif");
+    },
+
     applyFont() {
         const config = this.getConfig();
 
@@ -1674,7 +1709,11 @@ export const fontSettings = {
                 break;
             case 'preset':
             default:
+                if (config.family === 'Apple Music') {
+                    this.loadAppleMusicFont();
+                } else {
                     this.loadPresetFont(config.family, config.fallback);
+                }
                 break;
         }
     },

public/fonts/apple/sf-pro-display.css

@@ -0,0 +1,36 @@
+/**
+ * Apple Fonts - SF Pro Display
+ * Fonts sourced from Apple Music design system
+ */
+
+@font-face {
+    font-family: 'SF Pro Display';
+    src: url('SFPRODISPLAYREGULAR.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'SF Pro Display';
+    src: url('SFPRODISPLAYMEDIUM.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'SF Pro Display';
+    src: url('SFPRODISPLAYBOLD.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'SF Pro Display';
+    src: url('SFPRODISPLAYSEMIBOLDITALIC.woff2') format('woff2');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}

styles.css

@@ -440,6 +440,14 @@ kbd {
     margin-bottom: 1rem;
 }
 
+.sidebar-logo-link {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: inherit;
+    text-decoration: none;
+}
+
 .sidebar-logo .app-logo {
     width: 15px;
     height: 15px;