feat(desktop): more mono (nerd) fonts

1 files changed, 119 insertions, 4 deletions

diff --git a/packages/ui/src/components/font.tsx b/packages/ui/src/components/font.tsx
index b69139c0f..7e4b77b1c 100644
--- a/packages/ui/src/components/font.tsx
+++ b/packages/ui/src/components/font.tsx
@@ -1,6 +1,106 @@
 import { Style, Link } from "@solidjs/meta"
 import inter from "../assets/fonts/inter.woff2"
-import ibmPlexMono from "../assets/fonts/ibm-plex-mono.woff2"
+import ibmPlexMonoRegular from "../assets/fonts/ibm-plex-mono.woff2"
+import ibmPlexMonoMedium from "../assets/fonts/ibm-plex-mono-medium.woff2"
+import ibmPlexMonoBold from "../assets/fonts/ibm-plex-mono-bold.woff2"
+
+import cascadiaCode from "../assets/fonts/cascadia-code-nerd-font.woff2"
+import cascadiaCodeBold from "../assets/fonts/cascadia-code-nerd-font-bold.woff2"
+import firaCode from "../assets/fonts/fira-code-nerd-font.woff2"
+import firaCodeBold from "../assets/fonts/fira-code-nerd-font-bold.woff2"
+import hack from "../assets/fonts/hack-nerd-font.woff2"
+import hackBold from "../assets/fonts/hack-nerd-font-bold.woff2"
+import inconsolata from "../assets/fonts/inconsolata-nerd-font.woff2"
+import inconsolataBold from "../assets/fonts/inconsolata-nerd-font-bold.woff2"
+import intelOneMono from "../assets/fonts/intel-one-mono-nerd-font.woff2"
+import intelOneMonoBold from "../assets/fonts/intel-one-mono-nerd-font-bold.woff2"
+import jetbrainsMono from "../assets/fonts/jetbrains-mono-nerd-font.woff2"
+import jetbrainsMonoBold from "../assets/fonts/jetbrains-mono-nerd-font-bold.woff2"
+import mesloLgs from "../assets/fonts/meslo-lgs-nerd-font.woff2"
+import mesloLgsBold from "../assets/fonts/meslo-lgs-nerd-font-bold.woff2"
+import robotoMono from "../assets/fonts/roboto-mono-nerd-font.woff2"
+import robotoMonoBold from "../assets/fonts/roboto-mono-nerd-font-bold.woff2"
+import sourceCodePro from "../assets/fonts/source-code-pro-nerd-font.woff2"
+import sourceCodeProBold from "../assets/fonts/source-code-pro-nerd-font-bold.woff2"
+import ubuntuMono from "../assets/fonts/ubuntu-mono-nerd-font.woff2"
+import ubuntuMonoBold from "../assets/fonts/ubuntu-mono-nerd-font-bold.woff2"
+
+type MonoFont = {
+  family: string
+  regular: string
+  bold: string
+}
+
+export const MONO_NERD_FONTS = [
+  {
+    family: "JetBrains Mono Nerd Font",
+    regular: jetbrainsMono,
+    bold: jetbrainsMonoBold,
+  },
+  {
+    family: "Fira Code Nerd Font",
+    regular: firaCode,
+    bold: firaCodeBold,
+  },
+  {
+    family: "Cascadia Code Nerd Font",
+    regular: cascadiaCode,
+    bold: cascadiaCodeBold,
+  },
+  {
+    family: "Hack Nerd Font",
+    regular: hack,
+    bold: hackBold,
+  },
+  {
+    family: "Source Code Pro Nerd Font",
+    regular: sourceCodePro,
+    bold: sourceCodeProBold,
+  },
+  {
+    family: "Inconsolata Nerd Font",
+    regular: inconsolata,
+    bold: inconsolataBold,
+  },
+  {
+    family: "Roboto Mono Nerd Font",
+    regular: robotoMono,
+    bold: robotoMonoBold,
+  },
+  {
+    family: "Ubuntu Mono Nerd Font",
+    regular: ubuntuMono,
+    bold: ubuntuMonoBold,
+  },
+  {
+    family: "Intel One Mono Nerd Font",
+    regular: intelOneMono,
+    bold: intelOneMonoBold,
+  },
+  {
+    family: "Meslo LGS Nerd Font",
+    regular: mesloLgs,
+    bold: mesloLgsBold,
+  },
+] satisfies MonoFont[]
+
+const monoNerdCss = MONO_NERD_FONTS.map(
+  (font) => `
+        @font-face {
+          font-family: "${font.family}";
+          src: url("${font.regular}") format("woff2");
+          font-display: swap;
+          font-style: normal;
+          font-weight: 400;
+        }
+        @font-face {
+          font-family: "${font.family}";
+          src: url("${font.bold}") format("woff2");
+          font-display: swap;
+          font-style: normal;
+          font-weight: 700;
+        }`,
+).join("")
 
 export const Font = () => {
   return (
@@ -23,10 +123,24 @@ export const Font = () => {
         }
         @font-face {
           font-family: "IBM Plex Mono";
-          src: url("${ibmPlexMono}") format("woff2-variations");
+          src: url("${ibmPlexMonoRegular}") format("woff2");
+          font-display: swap;
+          font-style: normal;
+          font-weight: 400;
+        }
+        @font-face {
+          font-family: "IBM Plex Mono";
+          src: url("${ibmPlexMonoMedium}") format("woff2");
+          font-display: swap;
+          font-style: normal;
+          font-weight: 500;
+        }
+        @font-face {
+          font-family: "IBM Plex Mono";
+          src: url("${ibmPlexMonoBold}") format("woff2");
           font-display: swap;
           font-style: normal;
-          font-weight: 400 700;
+          font-weight: 700;
         }
         @font-face {
           font-family: "IBM Plex Mono Fallback";
@@ -36,9 +150,10 @@ export const Font = () => {
           descent-override: 25%;
           line-gap-override: 1%;
         }
+${monoNerdCss}
       `}</Style>
       <Link rel="preload" href={inter} as="font" type="font/woff2" crossorigin="anonymous" />
-      <Link rel="preload" href={ibmPlexMono} as="font" type="font/woff2" crossorigin="anonymous" />
+      <Link rel="preload" href={ibmPlexMonoRegular} as="font" type="font/woff2" crossorigin="anonymous" />
     </>
   )
 }