feat(settings): add curated multilingual fonts

Bundle Vazirmatn, Noto Sans Hebrew, Noto Sans SC, and Roboto with locale-aware fallbacks while keeping custom font import out of scope.

Refs #31

src/bindings/FontFamily.ts

@@ -1,3 +1,3 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type FontFamily = "system" | "inter" | "outfit" | "serif" | "monospace";
+export type FontFamily = "system" | "inter" | "outfit" | "vazirmatn" | "noto-sans-hebrew" | "noto-sans-sc" | "roboto" | "serif" | "monospace";

src/components/SettingsView.tsx

@@ -711,6 +711,10 @@ runEngineChecks(false);
     { value: 'system', label: t($ => $.settings.lookAndFeel.fontFamilySystem) },
     { value: 'inter', label: t($ => $.settings.lookAndFeel.fontFamilyInter) },
     { value: 'outfit', label: t($ => $.settings.lookAndFeel.fontFamilyOutfit) },
+    { value: 'vazirmatn', label: t($ => $.settings.lookAndFeel.fontFamilyVazirmatn) },
+    { value: 'noto-sans-hebrew', label: t($ => $.settings.lookAndFeel.fontFamilyNotoSansHebrew) },
+    { value: 'noto-sans-sc', label: t($ => $.settings.lookAndFeel.fontFamilyNotoSansSc) },
+    { value: 'roboto', label: t($ => $.settings.lookAndFeel.fontFamilyRoboto) },
     { value: 'serif', label: t($ => $.settings.lookAndFeel.fontFamilySerif) },
     { value: 'monospace', label: t($ => $.settings.lookAndFeel.fontFamilyMonospace) },
   ];

src/i18n/catalogs/en.ts

@@ -623,6 +623,10 @@ const common = {
       fontFamilySystem: 'System UI (recommended)',
       fontFamilyInter: 'Inter',
       fontFamilyOutfit: 'Outfit',
+      fontFamilyVazirmatn: 'Vazirmatn (Persian)',
+      fontFamilyNotoSansHebrew: 'Noto Sans Hebrew',
+      fontFamilyNotoSansSc: 'Noto Sans SC (Simplified Chinese)',
+      fontFamilyRoboto: 'Roboto',
       fontFamilySerif: 'Serif',
       fontFamilyMonospace: 'Monospace',
       fontSize: 'Font size',

src/i18n/catalogs/fa.ts

@@ -623,6 +623,10 @@ const fa = {
       fontFamilySystem: 'رابط کاربری سیستم (پیشنهادشده)',
       fontFamilyInter: 'Inter',
       fontFamilyOutfit: 'Outfit',
+      fontFamilyVazirmatn: 'Vazirmatn (فارسی)',
+      fontFamilyNotoSansHebrew: 'Noto Sans Hebrew (عبری)',
+      fontFamilyNotoSansSc: 'Noto Sans SC (چینی ساده‌شده)',
+      fontFamilyRoboto: 'Roboto',
       fontFamilySerif: 'سریف',
       fontFamilyMonospace: 'تک‌فاصله',
       fontSize: 'اندازه قلم',

src/i18n/catalogs/he.ts

@@ -623,6 +623,10 @@ const he = {
       fontFamilySystem: 'ממשק המערכת (מומלץ)',
       fontFamilyInter: 'Inter',
       fontFamilyOutfit: 'Outfit',
+      fontFamilyVazirmatn: 'Vazirmatn (פרסית)',
+      fontFamilyNotoSansHebrew: 'Noto Sans Hebrew (עברית)',
+      fontFamilyNotoSansSc: 'Noto Sans SC (סינית מפושטת)',
+      fontFamilyRoboto: 'Roboto',
       fontFamilySerif: 'סריף',
       fontFamilyMonospace: 'רוחב קבוע',
       fontSize: 'גודל גופן',

src/i18n/catalogs/ru.ts

@@ -623,6 +623,10 @@ const ru = {
       fontFamilySystem: 'Системный интерфейс (рекомендуется)',
       fontFamilyInter: 'Inter',
       fontFamilyOutfit: 'Outfit',
+      fontFamilyVazirmatn: 'Vazirmatn (персидский)',
+      fontFamilyNotoSansHebrew: 'Noto Sans Hebrew (иврит)',
+      fontFamilyNotoSansSc: 'Noto Sans SC (упрощённый китайский)',
+      fontFamilyRoboto: 'Roboto',
       fontFamilySerif: 'С засечками',
       fontFamilyMonospace: 'Моноширинный',
       fontSize: 'Размер шрифта',

src/i18n/catalogs/uk.ts

@@ -623,6 +623,10 @@ const uk = {
       fontFamilySystem: 'Системний інтерфейс (рекомендовано)',
       fontFamilyInter: 'Inter',
       fontFamilyOutfit: 'Outfit',
+      fontFamilyVazirmatn: 'Vazirmatn (перська)',
+      fontFamilyNotoSansHebrew: 'Noto Sans Hebrew (іврит)',
+      fontFamilyNotoSansSc: 'Noto Sans SC (спрощена китайська)',
+      fontFamilyRoboto: 'Roboto',
       fontFamilySerif: 'Із зарубками',
       fontFamilyMonospace: 'Моноширинний',
       fontSize: 'Розмір шрифту',

src/i18n/catalogs/zh-CN.ts

@@ -623,6 +623,10 @@ const zhCN = {
       fontFamilySystem: '系统界面字体（推荐）',
       fontFamilyInter: 'Inter',
       fontFamilyOutfit: 'Outfit',
+      fontFamilyVazirmatn: 'Vazirmatn（波斯语）',
+      fontFamilyNotoSansHebrew: 'Noto Sans Hebrew（希伯来语）',
+      fontFamilyNotoSansSc: 'Noto Sans SC（简体中文）',
+      fontFamilyRoboto: 'Roboto',
       fontFamilySerif: '衬线',
       fontFamilyMonospace: '等宽',
       fontSize: '字体大小',

src/i18n/resources.test.ts

@@ -96,6 +96,7 @@ describe('translation catalogs', () => {
       'settings.lookAndFeel.nord',
       'settings.lookAndFeel.fontFamilyInter',
       'settings.lookAndFeel.fontFamilyOutfit',
+      'settings.lookAndFeel.fontFamilyRoboto',
       'settings.lookAndFeel.windowControlStyleWindows',
       'settings.lookAndFeel.windowControlStyleGnome',
       'settings.network.chromeWindows',

src/index.css

@@ -232,21 +232,25 @@
   --font-stack-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, var(--font-locale-fallback), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --font-stack-inter: "Inter Variable", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, var(--font-locale-fallback), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --font-stack-outfit: "Outfit Variable", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, var(--font-locale-fallback), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-stack-vazirmatn: "Vazirmatn Variable", var(--font-stack-system);
+  --font-stack-noto-sans-hebrew: "Noto Sans Hebrew Variable", var(--font-stack-system);
+  --font-stack-noto-sans-sc: "Noto Sans SC Variable", var(--font-stack-system);
+  --font-stack-roboto: "Roboto Variable", var(--font-stack-system);
   --font-stack-serif: Georgia, "Times New Roman", var(--font-locale-fallback), serif;
   --font-stack-monospace: ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Fira Code", "JetBrains Mono", var(--font-locale-fallback), monospace;
   --font-sans: var(--font-stack-system);
 }
 
 html[lang="fa"] {
-  --font-locale-fallback: "Vazirmatn", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
+  --font-locale-fallback: "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
 }
 
 html[lang="he"] {
-  --font-locale-fallback: "Arial Hebrew", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
+  --font-locale-fallback: "Arial Hebrew", "Segoe UI", Arial, sans-serif;
 }
 
 html[lang="zh-CN"] {
-  --font-locale-fallback: "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
+  --font-locale-fallback: "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif;
 }
 
 html[lang="ru"],
@@ -266,6 +270,22 @@ html[data-font-family="outfit"] {
   --font-sans: var(--font-stack-outfit);
 }
 
+html[data-font-family="vazirmatn"] {
+  --font-sans: var(--font-stack-vazirmatn);
+}
+
+html[data-font-family="noto-sans-hebrew"] {
+  --font-sans: var(--font-stack-noto-sans-hebrew);
+}
+
+html[data-font-family="noto-sans-sc"] {
+  --font-sans: var(--font-stack-noto-sans-sc);
+}
+
+html[data-font-family="roboto"] {
+  --font-sans: var(--font-stack-roboto);
+}
+
 html[data-font-family="serif"] {
   --font-sans: var(--font-stack-serif);
 }

src/main.tsx

@@ -1,7 +1,11 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@fontsource-variable/inter/wght.css";
+import "@fontsource-variable/noto-sans-hebrew/wght.css";
+import "@fontsource-variable/noto-sans-sc/wght.css";
 import "@fontsource-variable/outfit/wght.css";
+import "@fontsource-variable/roboto/wght.css";
+import "@fontsource-variable/vazirmatn/wght.css";
 import "./index.css";
 import App from "./App";
 import { i18nReady } from "./i18n";

src/store/useSettingsStore.ts

@@ -75,7 +75,17 @@ const notifySettingsPersistenceError = () => {
 };
 
 const THEME_VALUES = ['system', 'light', 'dark', 'dracula', 'nord'] as const;
-const FONT_FAMILY_VALUES = ['system', 'inter', 'outfit', 'serif', 'monospace'] as const;
+const FONT_FAMILY_VALUES = [
+  'system',
+  'inter',
+  'outfit',
+  'vazirmatn',
+  'noto-sans-hebrew',
+  'noto-sans-sc',
+  'roboto',
+  'serif',
+  'monospace',
+] as const;
 const WINDOW_CONTROL_STYLE_VALUES = ['auto', 'macos', 'windows', 'gnome', 'minimal'] as const;
 const APP_FONT_SIZE_VALUES = ['small', 'standard', 'large'] as const;
 const LIST_ROW_DENSITY_VALUES = ['compact', 'standard', 'relaxed'] as const;