feat: allow languages to set specific fonts (@Shamsuddin45, @fehmer) (monkeytypegame#8208)

Co-authored-by: Jack <jack@monkeytype.com>

Author: fehmer

docs/LANGUAGES.md

@@ -24,6 +24,7 @@ The contents of the file should be as follows:
   "joiningScript": boolean,
   "orderedByFrequency": boolean,
   "bcp47": string,
+  "preferredFont":string,
   "words": string[]
 }
 ```
@@ -34,6 +35,7 @@ It is recommended that you familiarize yourselves with JSON before adding a lang
 For `bcp47` put your languages [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).
 If the words you're adding are ordered by frequency (most common words at the top, least at the bottom) set the value of `orderedByFrequency` to `true`, otherwise `false`.
 Finally, add your list of words to the `words` field.
+If the language is not rendered correctly, you can provide a `preferredFont`. The font needs to be one of monkeytypes fonts. Check the [fonts documentation](./FONTS.md).
 
 Then, go to `packages/schemas/src/languages.ts` and add your new language name at the _end_ of the `LanguageSchema` enum. Make sure to end the line with a comma. Make sure to add all your language names if you have created multiple word lists of differing lengths in the same language.
 

frontend/src/ts/ui.ts

@@ -17,6 +17,8 @@ import { qs, qsr } from "./utils/dom";
 import { createEffect } from "solid-js";
 import fileStorage from "./utils/file-storage";
 import { convertRemToPixels } from "./utils/numbers";
+import { getLanguage } from "./utils/json-data";
+import { replaceUnderscoresWithSpaces } from "./utils/strings";
 import { isTestActive } from "./states/test";
 
 let isPreviewingFont = false;
@@ -30,7 +32,7 @@ export function previewFontFamily(font: FontName): void {
 }
 
 export async function applyFontFamily(): Promise<void> {
-  let font = Config.fontFamily.replace(/_/g, " ");
+  let font = replaceUnderscoresWithSpaces(Config.fontFamily);
 
   const localFont = await fileStorage.getFile("LocalFontFamilyFile");
   if (localFont === undefined) {
@@ -49,10 +51,19 @@ export async function applyFontFamily(): Promise<void> {
       }`);
   }
 
-  document.documentElement.style.setProperty(
-    "--font",
-    `"${font}", "Roboto Mono", "Vazirharf", monospace`,
-  );
+  const preferredFont = (await getLanguage(Config.language))?.preferredFont;
+
+  const fonts = [
+    font,
+    preferredFont !== undefined
+      ? `"${replaceUnderscoresWithSpaces(preferredFont)}"`
+      : undefined,
+    '"Roboto Mono"',
+    '"Vazirharf"',
+    "monospace",
+  ].filter((it) => it !== undefined);
+
+  document.documentElement.style.setProperty("--font", fonts.join(","));
 }
 
 export function clearFontPreview(): void {
@@ -136,7 +147,7 @@ createEffect(() => {
 });
 
 configEvent.subscribe(async ({ key }) => {
-  if (key === "fontFamily") {
+  if (key === "fontFamily" || key === "language") {
     await applyFontFamily();
   }
 });

frontend/static/languages/lao.json

@@ -4,6 +4,7 @@
   "joiningScript": false,
   "orderedByFrequency": false,
   "bcp47": "lo",
+  "preferredFont": "Noto_Sans_Lao",
   "words": [
     "ຂ້ອຍ",
     "ເຈົ້າ",

frontend/static/languages/sindhi.json

@@ -4,6 +4,7 @@
   "joiningScript": true,
   "orderedByFrequency": false,
   "bcp47": "sd",
+  "preferredFont": "Noto_Naskh_Arabic",
   "words": [
     "جي",
     "۾",

packages/schemas/src/fonts.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { customEnumErrorHandler } from "./util";
 
-const KnownFontNameSchema = z.enum(
+export const KnownFontNameSchema = z.enum(
   [
     "Roboto_Mono",
     "Noto_Naskh_Arabic",

packages/schemas/src/languages.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { KnownFontNameSchema } from "./fonts";
 import { customEnumErrorHandler } from "./util";
 
 export const LanguageSchema = z.enum(
@@ -469,6 +470,7 @@ export const LanguageObjectSchema = z
       .array(z.tuple([z.string().min(1), z.string().min(1)]))
       .optional(),
     bcp47: z.string().optional(),
+    preferredFont: KnownFontNameSchema.optional(),
     originalPunctuation: z.boolean().optional(),
   })
   .strict();