From 2b43a5f82e8d3c66c40953807e5a6c4b8da3ce21 Mon Sep 17 00:00:00 2001
From: Seif Soliman <byseif21@gmail.com>
Date: Mon, 4 Aug 2025 16:12:38 +0300
Subject: [PATCH] fix(font): 0xProto not working in screenshot (@byseif21)
 (#6817)

### Description
starting with number seem to cuzes issue, did some hacking idk

---------

Co-authored-by: Christian Fehmer <cfe@sexy-developer.com>
---
 docs/FONTS.md                                       | 4 ++--
 frontend/src/ts/commandline/commandline-metadata.ts | 6 +++++-
 frontend/src/ts/constants/fonts.ts                  | 3 ++-
 frontend/src/ts/pages/settings.ts                   | 6 +++++-
 packages/schemas/src/fonts.ts                       | 2 +-
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/docs/FONTS.md b/docs/FONTS.md
index 06b08f12f..8cb1e194b 100644
--- a/docs/FONTS.md
+++ b/docs/FONTS.md
@@ -16,7 +16,7 @@ First, you will have to make a personal copy of the Monkeytype repository, also
 Once you have forked the repository you can now add your font. Place the font file in  `./frontend/static/webfonts` e.g.  `My-Font.woff2`.
 
 > [!NOTE]
-> Your font needs to be in the `.woff2` format. Your filename cannot include spaces.
+> Your font needs to be in the `.woff2` format. Your filename cannot include spaces or start with a number.
 
 Open `./packages/schemas/src/fonts.ts` and add the new font at the _end_ of the `KnownFontNameSchema` list like this:
 
@@ -29,7 +29,7 @@ const KnownFontNameSchema = z.enum(
     "My_Font",
 ```
 
-Call it whatever you want but make sure you replace spaces with underscores.
+Call it whatever you want but make sure you replace spaces with underscores and the font does not start with a number. 
 
 Then, go to `./frontend/src/ts/constants/fonts.ts` and add the following code to the _end_ of the `Fonts` object near to the very end of the file:
 
diff --git a/frontend/src/ts/commandline/commandline-metadata.ts b/frontend/src/ts/commandline/commandline-metadata.ts
index 7c610c2dd..0467e75dc 100644
--- a/frontend/src/ts/commandline/commandline-metadata.ts
+++ b/frontend/src/ts/commandline/commandline-metadata.ts
@@ -586,7 +586,11 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
   },
   fontFamily: {
     subgroup: {
-      options: typedKeys(Fonts).sort(),
+      options: typedKeys(Fonts).sort((a, b) =>
+        (Fonts[a]?.display ?? a.replace(/_/g, " ")).localeCompare(
+          Fonts[b]?.display ?? b.replace(/_/g, " ")
+        )
+      ),
       display: (name) =>
         Fonts[name as KnownFontName]?.display ?? name.replaceAll(/_/g, " "),
       customData: (name) => {
diff --git a/frontend/src/ts/constants/fonts.ts b/frontend/src/ts/constants/fonts.ts
index 67be7228a..1afe93070 100644
--- a/frontend/src/ts/constants/fonts.ts
+++ b/frontend/src/ts/constants/fonts.ts
@@ -133,7 +133,8 @@ export const Fonts: Record<KnownFontName, FontConfig> = {
   Iosevka: {
     fileName: "Iosevka-Regular.woff2",
   },
-  "0xProto": {
+  Proto: {
+    display: "0xProto",
     fileName: "0xProto-Regular.woff2",
   },
 };
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 5be0cbb72..a6123987b 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -580,7 +580,11 @@ async function fillSettingsPage(): Promise<void> {
   if (fontsEl.innerHTML === "") {
     let fontsElHTML = "";
 
-    for (const name of Misc.typedKeys(Fonts).sort()) {
+    for (const name of Misc.typedKeys(Fonts).sort((a, b) =>
+      (Fonts[a].display ?? a.replace(/_/g, " ")).localeCompare(
+        Fonts[b].display ?? b.replace(/_/g, " ")
+      )
+    )) {
       const font = Fonts[name];
       let fontFamily = name.replace(/_/g, " ");
 
diff --git a/packages/schemas/src/fonts.ts b/packages/schemas/src/fonts.ts
index 89b734b2f..fc8a6483b 100644
--- a/packages/schemas/src/fonts.ts
+++ b/packages/schemas/src/fonts.ts
@@ -41,7 +41,7 @@ const KnownFontNameSchema = z.enum(
     "Kanit",
     "Geist_Mono",
     "Iosevka",
-    "0xProto",
+    "Proto",
   ],
   {
     errorMap: customEnumErrorHandler("Must be a known font family"),