add fallback fonts for international languages
This commit is contained in:
parent
7c15027577
commit
de4871ac69
5 changed files with 44 additions and 8 deletions
14
index.html
14
index.html
|
|
@ -75,6 +75,8 @@
|
||||||
<!-- Preconnect to critical third-party origins -->
|
<!-- Preconnect to critical third-party origins -->
|
||||||
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin />
|
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin />
|
||||||
<link rel="preconnect" href="https://resources.tidal.com" crossorigin />
|
<link rel="preconnect" href="https://resources.tidal.com" crossorigin />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
|
||||||
<link rel="apple-touch-icon" href="/assets/logo.svg" />
|
<link rel="apple-touch-icon" href="/assets/logo.svg" />
|
||||||
<link rel="manifest" href="/manifest.json" />
|
<link rel="manifest" href="/manifest.json" />
|
||||||
|
|
@ -96,6 +98,18 @@
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
</noscript>
|
</noscript>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+HK:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+Hebrew:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Sans+Tamil:wght@400;500;600;700&family=Noto+Sans+Telugu:wght@400;500;600;700&family=Noto+Sans+Gujarati:wght@400;500;600;700&family=Noto+Sans+Kannada:wght@400;500;600;700&family=Noto+Sans+Malayalam:wght@400;500;600;700&family=Noto+Sans+Sinhala:wght@400;500;600;700&family=Noto+Sans+Khmer:wght@400;500;600;700&family=Noto+Sans+Lao:wght@400;500;600;700&family=Noto+Sans+Myanmar:wght@400;500;600;700&family=Noto+Sans+Georgian:wght@400;500;600;700&family=Noto+Sans+Armenian:wght@400;500;600;700&family=Noto+Sans+Ethiopic:wght@400;500;600;700&display=swap"
|
||||||
|
media="print"
|
||||||
|
onload="this.media = 'all'"
|
||||||
|
/>
|
||||||
|
<noscript>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+HK:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+Hebrew:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Sans+Tamil:wght@400;500;600;700&family=Noto+Sans+Telugu:wght@400;500;600;700&family=Noto+Sans+Gujarati:wght@400;500;600;700&family=Noto+Sans+Kannada:wght@400;500;600;700&family=Noto+Sans+Malayalam:wght@400;500;600;700&family=Noto+Sans+Sinhala:wght@400;500;600;700&family=Noto+Sans+Khmer:wght@400;500;600;700&family=Noto+Sans+Lao:wght@400;500;600;700&family=Noto+Sans+Myanmar:wght@400;500;600;700&family=Noto+Sans+Georgian:wght@400;500;600;700&family=Noto+Sans+Armenian:wght@400;500;600;700&family=Noto+Sans+Ethiopic:wght@400;500;600;700&display=swap"
|
||||||
|
/>
|
||||||
|
</noscript>
|
||||||
<link rel="stylesheet" href="/styles.css" />
|
<link rel="stylesheet" href="/styles.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2619,6 +2619,8 @@ export const fontSettings = {
|
||||||
FONT_SIZE_KEY: 'monochrome-font-size',
|
FONT_SIZE_KEY: 'monochrome-font-size',
|
||||||
FONT_LINK_ID: 'monochrome-dynamic-font',
|
FONT_LINK_ID: 'monochrome-dynamic-font',
|
||||||
FONT_FACE_ID: 'monochrome-dynamic-fontface',
|
FONT_FACE_ID: 'monochrome-dynamic-fontface',
|
||||||
|
NOTO_FALLBACK:
|
||||||
|
"'Noto Sans', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Hebrew', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Thai', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Gujarati', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Sinhala', 'Noto Sans Khmer', 'Noto Sans Lao', 'Noto Sans Myanmar', 'Noto Sans Georgian', 'Noto Sans Armenian', 'Noto Sans Ethiopic', system-ui, sans-serif",
|
||||||
|
|
||||||
getDefaultConfig() {
|
getDefaultConfig() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -2734,7 +2736,7 @@ export const fontSettings = {
|
||||||
weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
|
weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
|
||||||
});
|
});
|
||||||
|
|
||||||
document.documentElement.style.setProperty('--font-family', `'${familyName}', sans-serif`);
|
document.documentElement.style.setProperty('--font-family', `'${familyName}', ${this.NOTO_FALLBACK}`);
|
||||||
},
|
},
|
||||||
|
|
||||||
async loadFontFromUrl(url, familyName) {
|
async loadFontFromUrl(url, familyName) {
|
||||||
|
|
@ -2769,7 +2771,7 @@ export const fontSettings = {
|
||||||
weights: weights,
|
weights: weights,
|
||||||
});
|
});
|
||||||
|
|
||||||
document.documentElement.style.setProperty('--font-family', `'${fontFamily}', sans-serif`);
|
document.documentElement.style.setProperty('--font-family', `'${fontFamily}', ${this.NOTO_FALLBACK}`);
|
||||||
},
|
},
|
||||||
|
|
||||||
getFontFormat(url) {
|
getFontFormat(url) {
|
||||||
|
|
@ -2852,7 +2854,7 @@ export const fontSettings = {
|
||||||
weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
|
weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
|
||||||
});
|
});
|
||||||
|
|
||||||
document.documentElement.style.setProperty('--font-family', `'${fontFamily}', sans-serif`);
|
document.documentElement.style.setProperty('--font-family', `'${fontFamily}', ${this.NOTO_FALLBACK}`);
|
||||||
},
|
},
|
||||||
|
|
||||||
deleteUploadedFont(fontId) {
|
deleteUploadedFont(fontId) {
|
||||||
|
|
@ -2879,7 +2881,7 @@ export const fontSettings = {
|
||||||
weights: [400, 500, 600, 700, 800],
|
weights: [400, 500, 600, 700, 800],
|
||||||
});
|
});
|
||||||
|
|
||||||
const fontValue = family === 'monospace' ? 'monospace' : `'${family}', ${fallback}`;
|
const fontValue = family === 'monospace' ? 'monospace' : `'${family}', ${this.NOTO_FALLBACK}`;
|
||||||
document.documentElement.style.setProperty('--font-family', fontValue);
|
document.documentElement.style.setProperty('--font-family', fontValue);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -2915,7 +2917,7 @@ export const fontSettings = {
|
||||||
weights: [400, 500, 600, 700],
|
weights: [400, 500, 600, 700],
|
||||||
});
|
});
|
||||||
|
|
||||||
document.documentElement.style.setProperty('--font-family', "'SF Pro Display', sans-serif");
|
document.documentElement.style.setProperty('--font-family', `'SF Pro Display', ${this.NOTO_FALLBACK}`);
|
||||||
},
|
},
|
||||||
|
|
||||||
async applyFont() {
|
async applyFont() {
|
||||||
|
|
|
||||||
|
|
@ -712,7 +712,7 @@ export class ThemeStore {
|
||||||
--highlight: #3b82f6;
|
--highlight: #3b82f6;
|
||||||
--ring: #3b82f6;
|
--ring: #3b82f6;
|
||||||
--radius: 8px;
|
--radius: 8px;
|
||||||
--font-family: 'Inter', sans-serif;
|
--font-family: 'Inter', 'Noto Sans', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Hebrew', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Thai', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Gujarati', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Sinhala', 'Noto Sans Khmer', 'Noto Sans Lao', 'Noto Sans Myanmar', 'Noto Sans Georgian', 'Noto Sans Armenian', 'Noto Sans Ethiopic', system-ui, sans-serif;
|
||||||
--font-size-scale: 100%;
|
--font-size-scale: 100%;
|
||||||
}`;
|
}`;
|
||||||
this.updatePreview();
|
this.updatePreview();
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,15 @@
|
||||||
body {
|
body {
|
||||||
font-family:
|
font-family:
|
||||||
'Inter',
|
'Inter',
|
||||||
|
'Noto Sans SC',
|
||||||
|
'Noto Sans TC',
|
||||||
|
'Noto Sans JP',
|
||||||
|
'Noto Sans KR',
|
||||||
|
'Noto Sans Hebrew',
|
||||||
|
'Noto Sans Arabic',
|
||||||
|
'Noto Sans Devanagari',
|
||||||
|
'Noto Sans Thai',
|
||||||
|
system-ui,
|
||||||
-apple-system,
|
-apple-system,
|
||||||
BlinkMacSystemFont,
|
BlinkMacSystemFont,
|
||||||
'Segoe UI',
|
'Segoe UI',
|
||||||
|
|
|
||||||
15
styles.css
15
styles.css
|
|
@ -1,7 +1,13 @@
|
||||||
:root {
|
:root {
|
||||||
color-scheme: light dark;
|
color-scheme: light dark;
|
||||||
|
|
||||||
--font-family: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, sans-serif;
|
--font-family:
|
||||||
|
'Inter', 'Noto Sans', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR',
|
||||||
|
'Noto Sans Hebrew', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Thai',
|
||||||
|
'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Gujarati', 'Noto Sans Kannada', 'Noto Sans Malayalam',
|
||||||
|
'Noto Sans Sinhala', 'Noto Sans Khmer', 'Noto Sans Lao', 'Noto Sans Myanmar', 'Noto Sans Georgian',
|
||||||
|
'Noto Sans Armenian', 'Noto Sans Ethiopic', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
|
||||||
|
sans-serif;
|
||||||
--font-size-scale: 100%;
|
--font-size-scale: 100%;
|
||||||
--text-xs: 0.75rem;
|
--text-xs: 0.75rem;
|
||||||
--text-sm: 0.875rem;
|
--text-sm: 0.875rem;
|
||||||
|
|
@ -10911,7 +10917,12 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
|
||||||
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: 'SF Pro Display', Inter, sans-serif;
|
font-family:
|
||||||
|
'SF Pro Display', Inter, 'Noto Sans', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans JP',
|
||||||
|
'Noto Sans KR', 'Noto Sans Hebrew', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali',
|
||||||
|
'Noto Sans Thai', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Gujarati', 'Noto Sans Kannada',
|
||||||
|
'Noto Sans Malayalam', 'Noto Sans Sinhala', 'Noto Sans Khmer', 'Noto Sans Lao', 'Noto Sans Myanmar',
|
||||||
|
'Noto Sans Georgian', 'Noto Sans Armenian', 'Noto Sans Ethiopic', system-ui, sans-serif;
|
||||||
|
|
||||||
--lyplus-font-size-base: clamp(34px, 3vw, 52px);
|
--lyplus-font-size-base: clamp(34px, 3vw, 52px);
|
||||||
--lyplus-padding-line: 8px;
|
--lyplus-padding-line: 8px;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue