feat(client): add support for system font

src/public/app/widgets/type_widgets/options/appearance/fonts.ts

@@ -18,9 +18,10 @@ const FONT_FAMILIES: FontGroup[] = [
         title: t("fonts.generic-fonts"),
         items: [
             { value: "theme", label: t("fonts.theme_defined") },
+            { value: "system", label: t("fonts.system-default") },
             { value: "serif", label: t("fonts.serif") },
             { value: "sans-serif", label: t("fonts.sans-serif") },
-            { value: "monospace", label: t("fonts.monospace") },
+            { value: "monospace", label: t("fonts.monospace") }
         ]
     },
     {

src/public/translations/en/translation.json

@@ -1071,7 +1071,8 @@
     "handwriting-system-fonts": "Handwriting system fonts",
     "serif": "Serif",
     "sans-serif": "Sans Serif",
-    "monospace": "Monospace"
+    "monospace": "Monospace",
+    "system-default": "System default"
   },
   "max_content_width": {
     "title": "Content Width",

src/public/translations/ro/translation.json

@@ -561,7 +561,8 @@
     "serif-system-fonts": "Fonturi de sistem cu serifuri",
     "monospace": "Monospațiu",
     "sans-serif": "Fără serifuri",
-    "serif": "Cu serifuri"
+    "serif": "Cu serifuri",
+    "system-default": "Fontul predefinit al sistemului"
   },
   "global_menu": {
     "about": "Despre TriliumNext Notes",

src/routes/api/fonts.ts

@@ -2,6 +2,21 @@ import { Request, Response } from 'express';
 import optionService from "../../services/options.js";
 import { OptionMap } from '../../services/options_interface.js';
 
+const SYSTEM_SANS_SERIF = [
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Noto Sans",
+    "Helvetica",
+    "Arial",
+    "sans-serif",
+    "Apple Color Emoji","Segoe UI Emoji"
+].join(",");
+
+const SYSTEM_MONOSPACE = [
+    "monospace"
+].join(",");
+
 function getFontCss(req: Request, res: Response) {
     res.setHeader('Content-Type', 'text/css');
 
@@ -22,23 +37,41 @@ function getFontCss(req: Request, res: Response) {
     res.send(style);
 }
 
-function getFontFamily(optionsMap: OptionMap) {
+function getFontFamily({ mainFontFamily, treeFontFamily, detailFontFamily, monospaceFontFamily }: OptionMap) {
     let style = "";
 
-    if (optionsMap.mainFontFamily !== 'theme') {
+    // System override
-        style += `--main-font-family: ${optionsMap.mainFontFamily};`;
+    if (mainFontFamily === "system") {
+        mainFontFamily = SYSTEM_SANS_SERIF;
     }
 
-    if (optionsMap.treeFontFamily !== 'theme') {
+    if (treeFontFamily === "system") {
-        style += `--tree-font-family: ${optionsMap.treeFontFamily};`;
+        treeFontFamily = SYSTEM_SANS_SERIF;
     }
 
-    if (optionsMap.detailFontFamily !== 'theme') {
+    if (detailFontFamily === "system") {
-        style += `--detail-font-family: ${optionsMap.detailFontFamily};`;
+        detailFontFamily = SYSTEM_SANS_SERIF;
     }
 
-    if (optionsMap.monospaceFontFamily !== 'theme') {
+    if (monospaceFontFamily === "system") {
-        style += `--monospace-font-family: ${optionsMap.monospaceFontFamily};`;
+        monospaceFontFamily = SYSTEM_MONOSPACE;
+    }
+
+    // Apply the font override if not using theme fonts.
+    if (mainFontFamily !== 'theme') {
+        style += `--main-font-family: ${mainFontFamily};`;
+    }
+
+    if (treeFontFamily !== 'theme') {
+        style += `--tree-font-family: ${treeFontFamily};`;
+    }
+
+    if (detailFontFamily !== 'theme') {
+        style += `--detail-font-family: ${detailFontFamily};`;
+    }
+
+    if (monospaceFontFamily !== 'theme') {
+        style += `--monospace-font-family: ${monospaceFontFamily};`;
     }
 
     return style;