Custom font

cdmoro · Sep 30, 2024 · ce78c0e · ce78c0e
1 parent bf7a40d
commit ce78c0e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -4,7 +4,7 @@ import { initZenMode } from "./modules/zen";
 import { initWorkMode } from "./modules/work";
 import { initClock } from "./modules/clock";
 import { initScreensaver } from "./modules/screensaver";
-import { initFont } from "./modules/fonts";
+import { initFont } from "./modules/font";
 import { onMouseMove, updateFavicon } from "./utils/utils";
 import { initFadeMode } from "./modules/fade";
 import { initTimeMode } from "./modules/time";

diff --git a/src/modules/fonts.ts → src/modules/font.ts b/src/modules/fonts.ts → src/modules/font.ts
@@ -1,4 +1,5 @@
 import {
+  getStringSetting,
   initStringSetting,
   removeURLParam,
   setStringSetting,
@@ -33,18 +34,31 @@ export const INITIAL_THEME_FONT_SIZE = {
 const FONTS = ["Special Elite", ...new Set(Object.values(THEME_FONTS))].flat();
 const CSS_FONT_VARIABLE = "--override-quote-font-family";
 
+function createOption(value: string) {
+  const option = document.createElement("option");
+  option.value = value;
+  option.textContent = value;
+
+  return option;
+}
+
 export function initFont(defaultValue = "default") {
   const font = initStringSetting("font", defaultValue);
   const fontSelect = document.querySelector<HTMLSelectElement>("#font-select");
 
-  FONTS.forEach((font) => {
-    const option = document.createElement("option");
-    option.value = font;
-    option.textContent = font;
-
-    fontSelect?.appendChild(option);
+  FONTS.forEach((fontName) => {
+    fontSelect?.appendChild(createOption(fontName));
   });
 
+  if (font !== "default" && !FONTS.includes(font)) {
+    setStringSetting("custom-font", font);
+  }
+
+  const customFont = getStringSetting("custom-font");
+  if (customFont) {
+    fontSelect?.appendChild(createOption(customFont));
+  }
+
   setStringSetting("font", font);
   if (fontSelect) {
     fontSelect.value = font;

diff --git a/src/modules/themes.ts b/src/modules/themes.ts
@@ -1,4 +1,4 @@
-import { THEME_FONTS, resetFont } from "./fonts";
+import { THEME_FONTS, resetFont } from "./font";
 import {
   initStringSetting,
   setStringSetting,

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -1,7 +1,7 @@
 import { startScreensaver } from "../modules/screensaver";
 import { isBooleanSettingTrue } from "./settings";
 import { Locale, Quote } from "../types";
-import { INITIAL_THEME_FONT_SIZE } from "../modules/fonts";
+import { INITIAL_THEME_FONT_SIZE } from "../modules/font";
 
 const GITHUB_NEW_ISSUE_URL =
   "https://github.com/cdmoro/literature-clock/issues/new";