From de4871ac69e6d4af48b70e875e287e14a9f9414b Mon Sep 17 00:00:00 2001
From: uimaxbai <61615730+uimaxbai@users.noreply.github.com>
Date: Mon, 13 Apr 2026 20:57:47 +0100
Subject: [PATCH] add fallback fonts for international languages
---
index.html | 14 ++++++++++++++
js/storage.js | 12 +++++++-----
js/themeStore.js | 2 +-
public/reset-password.html | 9 +++++++++
styles.css | 15 +++++++++++++--
5 files changed, 44 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index 9c89c36..be50f82 100644
--- a/index.html
+++ b/index.html
@@ -75,6 +75,8 @@
+
+
@@ -96,6 +98,18 @@
rel="stylesheet"
/>
+
+
diff --git a/js/storage.js b/js/storage.js
index 6e41f69..37ad376 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -2619,6 +2619,8 @@ export const fontSettings = {
FONT_SIZE_KEY: 'monochrome-font-size',
FONT_LINK_ID: 'monochrome-dynamic-font',
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() {
return {
@@ -2734,7 +2736,7 @@ export const fontSettings = {
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) {
@@ -2769,7 +2771,7 @@ export const fontSettings = {
weights: weights,
});
- document.documentElement.style.setProperty('--font-family', `'${fontFamily}', sans-serif`);
+ document.documentElement.style.setProperty('--font-family', `'${fontFamily}', ${this.NOTO_FALLBACK}`);
},
getFontFormat(url) {
@@ -2852,7 +2854,7 @@ export const fontSettings = {
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) {
@@ -2879,7 +2881,7 @@ export const fontSettings = {
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);
},
@@ -2915,7 +2917,7 @@ export const fontSettings = {
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() {
diff --git a/js/themeStore.js b/js/themeStore.js
index 9ddeb80..8fb744e 100644
--- a/js/themeStore.js
+++ b/js/themeStore.js
@@ -712,7 +712,7 @@ export class ThemeStore {
--highlight: #3b82f6;
--ring: #3b82f6;
--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%;
}`;
this.updatePreview();
diff --git a/public/reset-password.html b/public/reset-password.html
index 245ad82..faf706c 100644
--- a/public/reset-password.html
+++ b/public/reset-password.html
@@ -16,6 +16,15 @@
body {
font-family:
'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,
BlinkMacSystemFont,
'Segoe UI',
diff --git a/styles.css b/styles.css
index 481957b..99711b8 100644
--- a/styles.css
+++ b/styles.css
@@ -1,7 +1,13 @@
:root {
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%;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
@@ -10911,7 +10917,12 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
height: 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-padding-line: 8px;