feat(fonts): add target-based font assignments in font manager and option to set app font

Author: bajrangCoder

src/lib/applySettings.js

@@ -33,7 +33,8 @@ export default {
 		}
 
 		actions("set-height", settings.quickTools);
-		fonts.setFont(settings.editorFont);
+		fonts.setAppFont(settings.appFont);
+		fonts.setEditorFont(settings.editorFont);
 		if (!themes.applied) {
 			themes.apply("dark");
 		}

src/lib/fonts.js

@@ -11,6 +11,9 @@ const customFontNames = new Set();
 const CUSTOM_FONTS_KEY = "custom_fonts";
 const FONT_FACE_STYLE_ID = "font-face-style";
 const EDITOR_STYLE_ID = "editor-font-style";
+const APP_STYLE_ID = "app-font-style";
+const DEFAULT_EDITOR_FONT = "Roboto Mono";
+const DEFAULT_APP_FONT_STACK = `"Roboto", sans-serif`;
 
 add(
 	"Fira Code",
@@ -187,7 +190,11 @@ function has(name) {
 	return fonts.has(name);
 }
 
-async function setFont(name) {
+function isCustom(name) {
+	return customFontNames.has(name);
+}
+
+async function setEditorFont(name) {
 	loader.showTitleLoader();
 	try {
 		await loadFont(name);
@@ -200,12 +207,35 @@ async function setFont(name) {
   }`;
 	} catch (error) {
 		toast(`${name} font not found`, "error");
-		setFont("Roboto Mono");
+		setEditorFont(DEFAULT_EDITOR_FONT);
 	} finally {
 		loader.removeTitleLoader();
 	}
 }
 
+async function setAppFont(name) {
+	const $style = ensureStyleElement(APP_STYLE_ID);
+
+	if (!name) {
+		$style.textContent = `:root {
+  --app-font-family: ${DEFAULT_APP_FONT_STACK};
+}`;
+		return;
+	}
+
+	try {
+		await loadFont(name);
+		$style.textContent = `:root {
+  --app-font-family: "${name}", ${DEFAULT_APP_FONT_STACK};
+}`;
+	} catch (error) {
+		toast(`${name} font not found`, "error");
+		$style.textContent = `:root {
+  --app-font-family: ${DEFAULT_APP_FONT_STACK};
+}`;
+	}
+}
+
 async function downloadFont(name, link) {
 	const FONT_DIR = Url.join(DATA_STORAGE, "fonts");
 	const FONT_FILE = Url.join(FONT_DIR, name);
@@ -268,6 +298,9 @@ export default {
 	getNames,
 	remove,
 	has,
-	setFont,
+	isCustom,
+	setFont: setEditorFont,
+	setEditorFont,
+	setAppFont,
 	loadFont,
 };

src/lib/settings.js

@@ -137,6 +137,7 @@ class Settings {
 			openFileListPos: this.OPEN_FILE_LIST_POS_HEADER,
 			quickTools: this.#IS_TABLET ? 0 : 1,
 			quickToolsTriggerMode: this.QUICKTOOLS_TRIGGER_MODE_TOUCH,
+			appFont: "",
 			editorFont: "Roboto Mono",
 			vibrateOnTap: true,
 			fullscreen: false,

src/main.scss

@@ -8,6 +8,7 @@
 
 :root {
   --scrollbar-width: 4px;
+  --app-font-family: "Roboto", sans-serif;
 }
 
 * {
@@ -32,7 +33,7 @@ body {
 
 body {
   user-select: none;
-  font-family: "Roboto", sans-serif;
+  font-family: var(--app-font-family);
   -webkit-tap-highlight-color: transparent;
   background-color: #9999ff;
   background-color: var(--primary-color);