vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add apple music fonts

Browse source
This commit is contained in:
Eduard Prigoana 2026-02-14 16:43:05 +00:00
parent 1e519002be
commit 615f5dc8bd
9 changed files with 117 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
index.html
View file

@ -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
class="app-logo"
xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
viewBox="14.75 14.75 70.5 70.5"
>
<g fill="currentColor">
<path
d="M38.25 14.75H85.25V61.75H61.75V38.25H38.25ZM14.75 38.25H38.25V61.75H61.75V85.25H14.75Z"
/>
</g>
</svg>
<span>Monochrome</span>
<a href="https://monochrome.tf/" class="sidebar-logo-link">
<svg
class="app-logo"
xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
viewBox="14.75 14.75 70.5 70.5"
>
<g fill="currentColor">
<path
d="M38.25 14.75H85.25V61.75H61.75V38.25H38.25ZM14.75 38.25H38.25V61.75H61.75V85.25H14.75Z"
/>
</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>

2
js/settings.js
View file

@ -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');
}

41
js/storage.js
View file

@ -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;
}
},

BIN
public/fonts/apple/SFPRODISPLAYBOLD.woff2 Normal file
View file

Binary file not shown.

BIN
public/fonts/apple/SFPRODISPLAYMEDIUM.woff2 Normal file
View file

Binary file not shown.

BIN
public/fonts/apple/SFPRODISPLAYREGULAR.woff2 Normal file
View file

Binary file not shown.

BIN
public/fonts/apple/SFPRODISPLAYSEMIBOLDITALIC.woff2 Normal file
View file

Binary file not shown.

36
public/fonts/apple/sf-pro-display.css Normal file
View file

@ -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;
}

8
styles.css
View file

@ -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;