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,20 +772,22 @@
             <aside class="sidebar">
                 <div class="sidebar-content">
                     <div class="sidebar-logo">
-                        <svg
+                        <a href="https://monochrome.tf/" class="sidebar-logo-link">
-                            class="app-logo"
+                            <svg
-                            xmlns="http://www.w3.org/2000/svg"
+                                class="app-logo"
-                            width="200"
+                                xmlns="http://www.w3.org/2000/svg"
-                            height="200"
+                                width="200"
-                            viewBox="14.75 14.75 70.5 70.5"
+                                height="200"
-                        >
+                                viewBox="14.75 14.75 70.5 70.5"
-                            <g fill="currentColor">
+                            >
-                                <path
+                                <g fill="currentColor">
-                                    d="M38.25 14.75H85.25V61.75H61.75V38.25H38.25ZM14.75 38.25H38.25V61.75H61.75V85.25H14.75Z"
+                                    <path
-                                />
+                                        d="M38.25 14.75H85.25V61.75H61.75V38.25H38.25ZM14.75 38.25H38.25V61.75H61.75V85.25H14.75Z"
-                            </g>
+                                    />
-                        </svg>
+                                </g>
-                        <span>Monochrome</span>
+                            </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:
-                this.loadPresetFont(config.family, config.fallback);
+                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;