diff --git a/src/App.svelte b/src/App.svelte
index 29c71e1..1ead293 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -111,6 +111,17 @@ $effect(() => {
});
$effect(() => {
+ const root = document.documentElement;
+ if (settings.fontFamily.trim())
+ root.style.setProperty("--font-family", settings.fontFamily);
+ else root.style.removeProperty("--font-family");
+ if (settings.fontFamilyMonospace.trim())
+ root.style.setProperty(
+ "--font-family-monospace",
+ settings.fontFamilyMonospace,
+ );
+ else root.style.removeProperty("--font-family-monospace");
+
document.documentElement.style.setProperty(
"--font-size",
settings.fontSize < 16 ? `${settings.fontSize}px` : "1rem",
diff --git a/src/app.css b/src/app.css
index 424c12d..268e620 100644
--- a/src/app.css
+++ b/src/app.css
@@ -14,6 +14,12 @@
--text-highlight: HighlightText;
--text: CanvasText;
+ --font-family:
+ system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+ "Apple Color Emoji", "Segoe UI Emoji";
+ --font-family-monospace:
+ ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+
--radius-sm: 2px;
--radius-md: 4px;
@@ -149,6 +155,7 @@ html {
);
font-size: calc(var(--font-size) * env(preferred-text-scale, 1));
+ font-family: var(--font-family);
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
diff --git a/src/lib/Controls.svelte b/src/lib/Controls.svelte
index 4bc91e8..c10096d 100644
--- a/src/lib/Controls.svelte
+++ b/src/lib/Controls.svelte
@@ -274,7 +274,7 @@ let menu = $state<{
gap: 0.5rem;
}
.time {
- font-family: ui-monospace, monospace;
+ font-family: var(--font-family-monospace);
font-size: 0.9rem;
}
.progress {
diff --git a/src/lib/Queue.svelte b/src/lib/Queue.svelte
index d1a13c8..e0b8090 100644
--- a/src/lib/Queue.svelte
+++ b/src/lib/Queue.svelte
@@ -93,6 +93,7 @@ function updateQueueFont() {
$effect(() => {
settings.fontSize;
+ settings.fontFamily;
if (!queueElement) return;
untrack(updateQueueFont);
const frame = requestAnimationFrame(updateQueueFont);
diff --git a/src/lib/dialogs/SettingsModal.svelte b/src/lib/dialogs/SettingsModal.svelte
index 94e3c6a..86ac1dc 100644
--- a/src/lib/dialogs/SettingsModal.svelte
+++ b/src/lib/dialogs/SettingsModal.svelte
@@ -262,6 +262,22 @@ const columnSettings = [
{t("settings.font_lowercase")}
+
+ {t("settings.font_family")}
+
+
+
+ {t("settings.font_family_monospace")}
+
+
@@ -839,7 +855,7 @@ const columnSettings = [
}
}
.num {
- font-family: ui-monospace, monospace;
+ font-family: var(--font-family-monospace);
}
h3 {
border-block-end: var(--border-text);
diff --git a/src/lib/dialogs/ShortcutsModal.svelte b/src/lib/dialogs/ShortcutsModal.svelte
index bee6ce9..6288aad 100644
--- a/src/lib/dialogs/ShortcutsModal.svelte
+++ b/src/lib/dialogs/ShortcutsModal.svelte
@@ -96,6 +96,6 @@ let sections = $derived([
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
border-block-end: var(--border-text);
- font-family: ui-monospace, monospace;
+ font-family: var(--font-family-monospace);
}
diff --git a/src/lib/languages/locales/ar.ts b/src/lib/languages/locales/ar.ts
index d5c0976..257f02c 100644
--- a/src/lib/languages/locales/ar.ts
+++ b/src/lib/languages/locales/ar.ts
@@ -197,6 +197,8 @@ const ar: BaseDict = {
dynamic_colors: "ألوان ديناميكية",
dynamic_favicon: "أيقونة ديناميكية",
font_lowercase: "أحرف صغيرة للخط",
+ font_family: "عائلة الخط",
+ font_family_monospace: "عائلة الخط أحادي المسافة",
font_size: "حجم الخط",
general: "عام",
icon_pack: "حزمة الأيقونات",
diff --git a/src/lib/languages/locales/bn.ts b/src/lib/languages/locales/bn.ts
index 5c46c71..a9d5f8d 100644
--- a/src/lib/languages/locales/bn.ts
+++ b/src/lib/languages/locales/bn.ts
@@ -197,6 +197,8 @@ const bn: BaseDict = {
dynamic_colors: "ডায়নামিক রং",
dynamic_favicon: "ডায়নামিক ফেভিকন",
font_lowercase: "ফন্টের ছোট হাতের অক্ষর",
+ font_family: "ফন্ট পরিবার",
+ font_family_monospace: "মনোস্পেস ফন্ট পরিবার",
font_size: "ফন্টের আকার",
general: "সাধারণ",
icon_pack: "আইকন प্যাক",
diff --git a/src/lib/languages/locales/cs.ts b/src/lib/languages/locales/cs.ts
index b1f00db..36ce49d 100644
--- a/src/lib/languages/locales/cs.ts
+++ b/src/lib/languages/locales/cs.ts
@@ -197,6 +197,8 @@ const cs: BaseDict = {
dynamic_colors: "Dynamické barvy",
dynamic_favicon: "Dynamická favicon",
font_lowercase: "Malé písmo",
+ font_family: "Rodina písma",
+ font_family_monospace: "Monospace rodina písma",
font_size: "Velikost písma",
general: "Obecné",
icon_pack: "Sada ikon",
diff --git a/src/lib/languages/locales/da.ts b/src/lib/languages/locales/da.ts
index 25615e7..cb61e6a 100644
--- a/src/lib/languages/locales/da.ts
+++ b/src/lib/languages/locales/da.ts
@@ -197,6 +197,8 @@ const da: BaseDict = {
dynamic_colors: "Dynamiske farver",
dynamic_favicon: "Dynamisk favicon",
font_lowercase: "Skrifttype små bogstaver",
+ font_family: "Skrifttypefamilie",
+ font_family_monospace: "Monospace-skrifttypefamilie",
font_size: "Skriftstørrelse",
general: "Generelt",
icon_pack: "Ikonpakke",
diff --git a/src/lib/languages/locales/de.ts b/src/lib/languages/locales/de.ts
index 5815c49..fe15723 100644
--- a/src/lib/languages/locales/de.ts
+++ b/src/lib/languages/locales/de.ts
@@ -198,6 +198,8 @@ const de: BaseDict = {
dynamic_colors: "Dynamische Farben",
dynamic_favicon: "Dynamisches Favicon",
font_lowercase: "Schriftart-Kleinschreibung",
+ font_family: "Schriftfamilie",
+ font_family_monospace: "Monospace-Schriftfamilie",
font_size: "Schriftgröße",
general: "Allgemein",
icon_pack: "Symbolpaket",
diff --git a/src/lib/languages/locales/el.ts b/src/lib/languages/locales/el.ts
index 55c4a25..dca7f61 100644
--- a/src/lib/languages/locales/el.ts
+++ b/src/lib/languages/locales/el.ts
@@ -199,6 +199,8 @@ const el: BaseDict = {
dynamic_colors: "Δυναμικά χρώματα",
dynamic_favicon: "Δυναμικό favicon",
font_lowercase: "Πεζά γραμματοσειράς",
+ font_family: "Οικογένεια γραμματοσειράς",
+ font_family_monospace: "Οικογένεια γραμματοσειράς Mono",
font_size: "Μέγεθος γραμματοσειράς",
general: "Γενικά",
icon_pack: "Πακέτο εικονιδίων",
diff --git a/src/lib/languages/locales/en.ts b/src/lib/languages/locales/en.ts
index 4750dc7..0acc29c 100644
--- a/src/lib/languages/locales/en.ts
+++ b/src/lib/languages/locales/en.ts
@@ -196,6 +196,8 @@ const en = {
dynamic_colors: "Dynamic Colors",
dynamic_favicon: "Dynamic Favicon",
font_lowercase: "Font Lowercase",
+ font_family: "Font Family",
+ font_family_monospace: "Font Family Mono",
font_size: "Font Size",
general: "General",
icon_pack: "Icon Pack",
diff --git a/src/lib/languages/locales/es.ts b/src/lib/languages/locales/es.ts
index db628cf..a02cb4c 100644
--- a/src/lib/languages/locales/es.ts
+++ b/src/lib/languages/locales/es.ts
@@ -198,6 +198,8 @@ const es: BaseDict = {
dynamic_colors: "Colores dinámicos",
dynamic_favicon: "Favicon dinámico",
font_lowercase: "Minúsculas de fuente",
+ font_family: "Familia tipográfica",
+ font_family_monospace: "Familia tipográfica monoespaciada",
font_size: "Tamaño de fuente",
general: "General",
icon_pack: "Paquete de iconos",
diff --git a/src/lib/languages/locales/fi.ts b/src/lib/languages/locales/fi.ts
index 256a1cc..ead0dc3 100644
--- a/src/lib/languages/locales/fi.ts
+++ b/src/lib/languages/locales/fi.ts
@@ -198,6 +198,8 @@ const fi: BaseDict = {
dynamic_colors: "Dynaamiset värit",
dynamic_favicon: "Dynaaminen favicon",
font_lowercase: "Fontin pienet kirjaimet",
+ font_family: "Fonttiperhe",
+ font_family_monospace: "Monospace-fonttiperhe",
font_size: "Fonttikoko",
general: "Yleiset",
icon_pack: "Kuvakepaketti",
diff --git a/src/lib/languages/locales/fr.ts b/src/lib/languages/locales/fr.ts
index 0c3f0d2..597bcd3 100644
--- a/src/lib/languages/locales/fr.ts
+++ b/src/lib/languages/locales/fr.ts
@@ -198,6 +198,8 @@ const fr: BaseDict = {
dynamic_colors: "Couleurs dynamiques",
dynamic_favicon: "Favicon dynamique",
font_lowercase: "Minuscules de police",
+ font_family: "Famille de polices",
+ font_family_monospace: "Famille de polices monospace",
font_size: "Taille de police",
general: "Général",
icon_pack: 'Pack d"icônes',
diff --git a/src/lib/languages/locales/he.ts b/src/lib/languages/locales/he.ts
index 8d7e930..fbb5c78 100644
--- a/src/lib/languages/locales/he.ts
+++ b/src/lib/languages/locales/he.ts
@@ -197,6 +197,8 @@ const he: BaseDict = {
dynamic_colors: "צבעים דינמיים",
dynamic_favicon: "צלמית (פאביקון) דינמית",
font_lowercase: "גופן באותיות קטנות",
+ font_family: "משפחת גופנים",
+ font_family_monospace: "משפחת גופנים מונוספייס",
font_size: "גודל גופן",
general: "כללי",
icon_pack: "חבילת אייקונים",
diff --git a/src/lib/languages/locales/hi.ts b/src/lib/languages/locales/hi.ts
index aea0c79..3db7f64 100644
--- a/src/lib/languages/locales/hi.ts
+++ b/src/lib/languages/locales/hi.ts
@@ -196,6 +196,8 @@ const hi: BaseDict = {
dynamic_colors: "गतिशील रंग",
dynamic_favicon: "गतिशील फेविकॉन",
font_lowercase: "फ़ॉन्ट छोटे अक्षर",
+ font_family: "फ़ॉन्ट परिवार",
+ font_family_monospace: "मोनोस्पेस फ़ॉन्ट परिवार",
font_size: "फ़ॉन्ट का आकार",
general: "सामान्य",
icon_pack: "आइकन पैक",
diff --git a/src/lib/languages/locales/id.ts b/src/lib/languages/locales/id.ts
index db7734d..a2a73d4 100644
--- a/src/lib/languages/locales/id.ts
+++ b/src/lib/languages/locales/id.ts
@@ -197,6 +197,8 @@ const id: BaseDict = {
dynamic_colors: "Warna dinamis",
dynamic_favicon: "Favicon dinamis",
font_lowercase: "Huruf kecil font",
+ font_family: "Keluarga font",
+ font_family_monospace: "Keluarga font monospace",
font_size: "Ukuran font",
general: "Umum",
icon_pack: "Paket ikon",
diff --git a/src/lib/languages/locales/it.ts b/src/lib/languages/locales/it.ts
index 4f14626..fd813f1 100644
--- a/src/lib/languages/locales/it.ts
+++ b/src/lib/languages/locales/it.ts
@@ -198,6 +198,8 @@ const it: BaseDict = {
dynamic_colors: "Colori dinamici",
dynamic_favicon: "Favicon dinamica",
font_lowercase: "Minuscolo del carattere",
+ font_family: "Famiglia del carattere",
+ font_family_monospace: "Famiglia del carattere monospace",
font_size: "Dimensione font",
general: "Generale",
icon_pack: "Pacchetto di icone",
diff --git a/src/lib/languages/locales/ja.ts b/src/lib/languages/locales/ja.ts
index d869f8a..0ee76e9 100644
--- a/src/lib/languages/locales/ja.ts
+++ b/src/lib/languages/locales/ja.ts
@@ -198,6 +198,8 @@ const ja: BaseDict = {
dynamic_colors: "ダイナミックカラー",
dynamic_favicon: "ダイナミックファビコン",
font_lowercase: "フォント小文字",
+ font_family: "フォントファミリー",
+ font_family_monospace: "モノスペースフォントファミリー",
font_size: "フォントサイズ",
general: "全般",
icon_pack: "アイコンパック",
diff --git a/src/lib/languages/locales/ko.ts b/src/lib/languages/locales/ko.ts
index 44b9313..a4f3aba 100644
--- a/src/lib/languages/locales/ko.ts
+++ b/src/lib/languages/locales/ko.ts
@@ -196,6 +196,8 @@ const ko: BaseDict = {
dynamic_colors: "다이내믹 컬러",
dynamic_favicon: "다이내믹 파비콘",
font_lowercase: "글꼴 소문자",
+ font_family: "글꼴 패밀리",
+ font_family_monospace: "고정폭 글꼴 패밀리",
font_size: "글자 크기",
general: "일반",
icon_pack: "아이콘 팩",
diff --git a/src/lib/languages/locales/nl.ts b/src/lib/languages/locales/nl.ts
index 991cac7..9a90cd5 100644
--- a/src/lib/languages/locales/nl.ts
+++ b/src/lib/languages/locales/nl.ts
@@ -199,6 +199,8 @@ const nl: BaseDict = {
dynamic_colors: "Dynamische kleuren",
dynamic_favicon: "Dynamisch favicon",
font_lowercase: "Kleine letters in lettertype",
+ font_family: "Lettertypefamilie",
+ font_family_monospace: "Monospace-lettertypefamilie",
font_size: "Lettergrootte",
general: "Algemeen",
icon_pack: "Icoonpakket",
diff --git a/src/lib/languages/locales/no.ts b/src/lib/languages/locales/no.ts
index 23c614d..cb63bfa 100644
--- a/src/lib/languages/locales/no.ts
+++ b/src/lib/languages/locales/no.ts
@@ -197,6 +197,8 @@ const no: BaseDict = {
dynamic_colors: "Dynamiske farger",
dynamic_favicon: "Dynamisk favicon",
font_lowercase: "Skrifttype små bokstaver",
+ font_family: "Skrifttypefamilie",
+ font_family_monospace: "Monospace-skrifttypefamilie",
font_size: "Skriftstørrelse",
general: "Generelt",
icon_pack: "Ikonpakke",
diff --git a/src/lib/languages/locales/pl.ts b/src/lib/languages/locales/pl.ts
index 7a05d8c..565f5c3 100644
--- a/src/lib/languages/locales/pl.ts
+++ b/src/lib/languages/locales/pl.ts
@@ -197,6 +197,8 @@ const pl: BaseDict = {
dynamic_colors: "Dynamiczne kolory",
dynamic_favicon: "Dynamiczna ikona",
font_lowercase: "Małe litery czcionki",
+ font_family: "Rodzina czcionki",
+ font_family_monospace: "Rodzina czcionki monospace",
font_size: "Rozmiar czcionki",
general: "Ogólne",
icon_pack: "Zestaw ikon",
diff --git a/src/lib/languages/locales/pt.ts b/src/lib/languages/locales/pt.ts
index 031e158..629b9c5 100644
--- a/src/lib/languages/locales/pt.ts
+++ b/src/lib/languages/locales/pt.ts
@@ -198,6 +198,8 @@ const pt: BaseDict = {
dynamic_colors: "Cores dinâmicas",
dynamic_favicon: "Favicon dinâmico",
font_lowercase: "Minúsculas da fonte",
+ font_family: "Família da fonte",
+ font_family_monospace: "Família da fonte monoespaçada",
font_size: "Tamanho da fonte",
general: "Geral",
icon_pack: "Pacote de ícones",
diff --git a/src/lib/languages/locales/ro.ts b/src/lib/languages/locales/ro.ts
index 7243b92..7c50ad0 100644
--- a/src/lib/languages/locales/ro.ts
+++ b/src/lib/languages/locales/ro.ts
@@ -197,6 +197,8 @@ const ro: BaseDict = {
dynamic_colors: "Culori dinamice",
dynamic_favicon: "Favicon dinamic",
font_lowercase: "Litere mici font",
+ font_family: "Familia fontului",
+ font_family_monospace: "Familia fontului monospațiat",
font_size: "Dimensiune font",
general: "Generale",
icon_pack: "Pachet de pictograme",
diff --git a/src/lib/languages/locales/ru.ts b/src/lib/languages/locales/ru.ts
index fad4f5f..4255e54 100644
--- a/src/lib/languages/locales/ru.ts
+++ b/src/lib/languages/locales/ru.ts
@@ -197,6 +197,8 @@ const ru: BaseDict = {
dynamic_colors: "Динамические цвета",
dynamic_favicon: "Динамическая иконка",
font_lowercase: "Строчный шрифт",
+ font_family: "Семейство шрифта",
+ font_family_monospace: "Семейство моноширинного шрифта",
font_size: "Размер шрифта",
general: "Основные",
icon_pack: "Пакет иконок",
diff --git a/src/lib/languages/locales/sv.ts b/src/lib/languages/locales/sv.ts
index 06c687e..94d106c 100644
--- a/src/lib/languages/locales/sv.ts
+++ b/src/lib/languages/locales/sv.ts
@@ -197,6 +197,8 @@ const sv: BaseDict = {
dynamic_colors: "Dynamiska färger",
dynamic_favicon: "Dynamisk favicon",
font_lowercase: "Teckensnitt gemener",
+ font_family: "Typsnittsfamilj",
+ font_family_monospace: "Monospace-typsnittsfamilj",
font_size: "Textstorlek",
general: "Allmänt",
icon_pack: "Ikonpaket",
diff --git a/src/lib/languages/locales/th.ts b/src/lib/languages/locales/th.ts
index 47f8593..b9df3b1 100644
--- a/src/lib/languages/locales/th.ts
+++ b/src/lib/languages/locales/th.ts
@@ -196,6 +196,8 @@ const th: BaseDict = {
dynamic_colors: "สีไดนามิก",
dynamic_favicon: "Favicon ไดนามิก",
font_lowercase: "ตัวพิมพ์เล็กของฟอนต์",
+ font_family: "ตระกูลฟอนต์",
+ font_family_monospace: "ตระกูลฟอนต์โมโนสเปซ",
font_size: "ขนาดตัวอักษร",
general: "ทั่วไป",
icon_pack: "แพ็คไอคอน",
diff --git a/src/lib/languages/locales/tl.ts b/src/lib/languages/locales/tl.ts
index 5a2e866..7003a16 100644
--- a/src/lib/languages/locales/tl.ts
+++ b/src/lib/languages/locales/tl.ts
@@ -198,6 +198,8 @@ const tl: BaseDict = {
dynamic_colors: "Mga dynamic na kulay",
dynamic_favicon: "Dynamic na favicon",
font_lowercase: "Maliit na titik ng font",
+ font_family: "Pamilya ng font",
+ font_family_monospace: "Pamilya ng monospace na font",
font_size: "Sukat ng font",
general: "Pangkalahatan",
icon_pack: "Icon pack",
diff --git a/src/lib/languages/locales/tr.ts b/src/lib/languages/locales/tr.ts
index 58744da..3d1552b 100644
--- a/src/lib/languages/locales/tr.ts
+++ b/src/lib/languages/locales/tr.ts
@@ -197,6 +197,8 @@ const tr: BaseDict = {
dynamic_colors: "Dinamik renkler",
dynamic_favicon: "Dinamik simge",
font_lowercase: "Yazı tipi küçük harf",
+ font_family: "Yazı tipi ailesi",
+ font_family_monospace: "Monospace yazı tipi ailesi",
font_size: "Yazı boyutu",
general: "Genel",
icon_pack: "Simge paketi",
diff --git a/src/lib/languages/locales/uk.ts b/src/lib/languages/locales/uk.ts
index edf0f5b..c9b81aa 100644
--- a/src/lib/languages/locales/uk.ts
+++ b/src/lib/languages/locales/uk.ts
@@ -197,6 +197,8 @@ const uk: BaseDict = {
dynamic_colors: "Динамічні кольори",
dynamic_favicon: "Динамічний favicon",
font_lowercase: "Малі літери шрифту",
+ font_family: "Сімейство шрифту",
+ font_family_monospace: "Сімейство моноширинного шрифту",
font_size: "Розмір шрифту",
general: "Загальні",
icon_pack: "Пакет іконок",
diff --git a/src/lib/languages/locales/vi.ts b/src/lib/languages/locales/vi.ts
index fbd1b36..762e049 100644
--- a/src/lib/languages/locales/vi.ts
+++ b/src/lib/languages/locales/vi.ts
@@ -198,6 +198,8 @@ const vi: BaseDict = {
dynamic_colors: "Màu sắc động",
dynamic_favicon: "Favicon động",
font_lowercase: "Chữ thường của phông chữ",
+ font_family: "Họ phông chữ",
+ font_family_monospace: "Họ phông chữ monospace",
font_size: "Cỡ chữ",
general: "Chung",
icon_pack: "Gói biểu tượng",
diff --git a/src/lib/languages/locales/zhcn.ts b/src/lib/languages/locales/zhcn.ts
index 307a6bf..6e5cf0a 100644
--- a/src/lib/languages/locales/zhcn.ts
+++ b/src/lib/languages/locales/zhcn.ts
@@ -192,6 +192,8 @@ const zhcn: BaseDict = {
dynamic_colors: "动态颜色",
dynamic_favicon: "动态图标",
font_lowercase: "字体小写",
+ font_family: "字体系列",
+ font_family_monospace: "等宽字体系列",
font_size: "字体大小",
general: "常规",
icon_pack: "图标包",
diff --git a/src/lib/languages/locales/zhtw.ts b/src/lib/languages/locales/zhtw.ts
index f6f3ed1..8715fc5 100644
--- a/src/lib/languages/locales/zhtw.ts
+++ b/src/lib/languages/locales/zhtw.ts
@@ -192,6 +192,8 @@ const zhtw: BaseDict = {
dynamic_colors: "動態顏色",
dynamic_favicon: "動態圖示",
font_lowercase: "字體小寫",
+ font_family: "字體系列",
+ font_family_monospace: "等寬字體系列",
font_size: "字體大小",
general: "一般",
icon_pack: "圖標包",
diff --git a/src/lib/settings.svelte.ts b/src/lib/settings.svelte.ts
index 33a9fc0..fe3df4e 100644
--- a/src/lib/settings.svelte.ts
+++ b/src/lib/settings.svelte.ts
@@ -56,6 +56,8 @@ const settingDefs = {
enableTitle: { default: true },
enableTrackNum: { default: false },
enableYear: { default: false },
+ fontFamily: { default: "" },
+ fontFamilyMonospace: { default: "" },
fontSize: { default: 13 },
iconPack: {
default: "heroicons16solid" as IconPackName,