fix: preview fonts not working correctly in the commandline (#5595)

frontend/scripts/font-preview.mjs

@@ -17,7 +17,7 @@ export async function generatePreviewFonts(debug) {
   for (const font of Fonts) {
     if (font.systemFont) continue;
 
-    const display = font.display || font.name;
+    const display = (font.display || font.name) + "Fontfamily";
 
     const fileNames = srcFiles.filter((it) =>
       it.startsWith(font.name.replaceAll(" ", "") + "-")

frontend/src/ts/commandline/commandline.ts

@@ -378,8 +378,9 @@ async function showCommands(): Promise<void> {
       );
     }
 
-    if (command.id.startsWith("changeTheme") && command.customData) {
-      html += `<div class="command withThemeBubbles" data-command-id="${command.id}" data-index="${index}" style="${customStyle}">
+    if (command.customData !== undefined) {
+      if (command.id.startsWith("changeTheme")) {
+        html += `<div class="command withThemeBubbles" data-command-id="${command.id}" data-index="${index}" style="${customStyle}">
       ${iconHTML}<div>${display}</div>
       <div class="themeBubbles" style="background: ${command.customData["bgColor"]};outline: 0.25rem solid ${command.customData["bgColor"]};">
         <div class="themeBubble" style="background: ${command.customData["mainColor"]}"></div>
@@ -387,6 +388,20 @@ async function showCommands(): Promise<void> {
         <div class="themeBubble" style="background: ${command.customData["textColor"]}"></div>
       </div>
       </div>`;
+      }
+      if (command.id.startsWith("changeFont")) {
+        let fontFamily = command.customData["name"];
+
+        if (fontFamily === "Helvetica") {
+          fontFamily = "Comic Sans MS";
+        }
+
+        if (command.customData["isSystem"] === false) {
+          fontFamily += " Preview";
+        }
+
+        html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="font-family: ${fontFamily}">${iconHTML}<div>${display}</div></div>`;
+      }
     } else {
       html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="${customStyle}">${iconHTML}<div>${display}</div></div>`;
     }

frontend/src/ts/commandline/lists/font-family.ts

@@ -19,11 +19,22 @@ const commands: MonkeyTypes.Command[] = [
 function update(fonts: MonkeyTypes.FontObject[]): void {
   fonts.forEach((font) => {
     const configVal = font.name.replace(/ /g, "_");
+
+    const customData: Record<string, string | boolean> = {
+      name: font.name,
+    };
+
+    if (font.display !== undefined) {
+      customData["display"] = font.display;
+    }
+
+    customData["isSystem"] = font.systemFont ?? false;
+
     subgroup.list.push({
       id: "changeFont" + font.name.replace(/ /g, "_"),
       display: font.display !== undefined ? font.display : font.name,
       configValue: configVal,
-      customStyle: `font-family: ${font.name}`,
+      customData,
       hover: (): void => {
         UI.previewFontFamily(font.name);
       },

frontend/src/ts/pages/settings.ts

@@ -631,14 +631,20 @@ async function fillSettingsPage(): Promise<void> {
 
   if (fontsList) {
     for (const font of fontsList) {
+      let fontFamily = font.name;
+      if (fontFamily === "Helvetica") {
+        fontFamily = "Comic Sans MS";
+      }
+      if ((font.systemFont ?? false) === false) {
+        fontFamily += " Preview";
+      }
+      const activeClass = Config.fontFamily === font.name ? " active" : "";
+      const display = font.display !== undefined ? font.display : font.name;
       if (Config.fontFamily === font.name) isCustomFont = false;
-      fontsElHTML += `<button class="${
-        Config.fontFamily === font.name ? " active" : ""
-      }" style="font-family:${
-        font.display !== undefined ? font.display : font.name
-      } Preview" data-config-value="${font.name.replace(/ /g, "_")}">${
-        font.display !== undefined ? font.display : font.name
-      }</button>`;
+      fontsElHTML += `<button class="${activeClass}" style="font-family:${fontFamily}" data-config-value="${font.name.replace(
+        / /g,
+        "_"
+      )}">${display}</button>`;
     }
 
     fontsElHTML += isCustomFont

frontend/src/ts/types/types.d.ts

@@ -83,6 +83,7 @@ declare namespace MonkeyTypes {
   type FontObject = {
     name: string;
     display?: string;
+    systemFont?: string;
   };
 
   type FunboxWordsFrequency = "normal" | "zipf";
@@ -330,7 +331,7 @@ declare namespace MonkeyTypes {
     available?: () => boolean;
     active?: () => boolean;
     shouldFocusTestUI?: boolean;
-    customData?: Record<string, string>;
+    customData?: Record<string, string | boolean>;
   };
 
   type CommandsSubgroup = {