web: replace regular noto sans mono with a custom font with 3 characters

also fixed flicker that i introduced in the last commit

this font is not used anywhere outside of the download button, so it makes no sense to load the entire font

pnpm-lock.yaml

@@ -97,9 +97,6 @@ importers:
       '@fontsource/ibm-plex-mono':
         specifier: ^5.0.13
         version: 5.0.13
-      '@fontsource/noto-sans-mono':
-        specifier: ^5.2.7
-        version: 5.2.7
       '@fontsource/redaction-10':
         specifier: ^5.0.2
         version: 5.0.2
@@ -534,9 +531,6 @@ packages:
   '@fontsource/ibm-plex-mono@5.0.13':
     resolution: {integrity: sha512-gtlMmvk//2AgDEZDFsoL5z9mgW3ZZg/9SC7pIfDwNKp5DtZpApgqd1Fua3HhPwYRIHrT76IQ1tMTzQKLEGtJGQ==}
 
-  '@fontsource/noto-sans-mono@5.2.7':
-    resolution: {integrity: sha512-kw+z21ZEjOzsUS49FVLsR/WwJ7LnXrlam5SzNGY6uSSF4gfzYm2CBzcS0Y5YqQCrtDZ4S6PpaAGRMzQ/MAZaXA==}
-
   '@fontsource/redaction-10@5.0.2':
     resolution: {integrity: sha512-PODxYvb06YrNxdUBGcygiMibpgcZihzmvkmlX/TQAA2F7BUU/anfSKQi/VnLdJ/8LIK81/bUY+i7L/GP27FkVw==}
 
@@ -2406,8 +2400,6 @@ snapshots:
 
   '@fontsource/ibm-plex-mono@5.0.13': {}
 
-  '@fontsource/noto-sans-mono@5.2.7': {}
-
   '@fontsource/redaction-10@5.0.2': {}
 
   '@humanfs/core@0.19.1': {}

web/package.json

@@ -26,7 +26,6 @@
     "devDependencies": {
         "@eslint/js": "^9.5.0",
         "@fontsource/ibm-plex-mono": "^5.0.13",
-        "@fontsource/noto-sans-mono": "^5.2.7",
         "@fontsource/redaction-10": "^5.0.2",
         "@imput/libav.js-encode-cli": "6.7.7",
         "@imput/libav.js-remux-cli": "^6.5.7",

web/src/app.css

@@ -188,7 +188,7 @@ body {
 }
 
 * {
-    font-family: "IBM Plex Mono", "Noto Sans Mono", monospace;
+    font-family: "IBM Plex Mono", monospace;
     user-select: none;
     scrollbar-width: none;
     -webkit-user-select: none;

web/src/fonts/noto-mono-cobalt.css

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: "Noto Sans Mono";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: url(/fonts/noto-mono-cobalt.woff2) format("woff2");
+}

web/src/routes/+layout.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
     import "../app.css";
+    import "../fonts/noto-mono-cobalt.css";
 
     import "@fontsource/ibm-plex-mono/400.css";
     import "@fontsource/ibm-plex-mono/400-italic.css";
     import "@fontsource/ibm-plex-mono/500.css";
 
-    import "@fontsource/noto-sans-mono";
-
     import { onMount } from "svelte";
     import { page } from "$app/stores";
     import { updated } from "$app/stores";
@@ -39,7 +38,7 @@
         $settings.accessibility.reduceTransparency ||
         device.prefers.reducedTransparency;
 
-    $: preloadMeowbalt = false;
+    $: preloadAssets = false;
     $: plausibleLoaded = false;
 
     afterNavigate(async () => {
@@ -53,7 +52,7 @@
     });
 
     onMount(() => {
-        preloadMeowbalt = true;
+        preloadAssets = true;
     });
 </script>
 
@@ -97,8 +96,8 @@
     data-theme={browser ? $currentTheme : undefined}
     lang={$locale}
 >
-    {#if preloadMeowbalt}
-        <div id="preload-meowbalt" aria-hidden="true"></div>
+    {#if preloadAssets}
+        <div id="preload" aria-hidden="true">??</div>
     {/if}
     <div
         id="cobalt"
@@ -198,13 +197,20 @@
         }
     }
 
-    /* preload meowbalt assets to prevent flickering in dialogs */
-    #preload-meowbalt {
+    /* preload assets to prevent flickering when they appear on screen */
+    #preload {
         width: 0;
         height: 0;
         position: absolute;
         z-index: -10;
         content: url(/meowbalt/smile.png) url(/meowbalt/error.png)
             url(/meowbalt/question.png) url(/meowbalt/think.png);
+
+        font-family: "Noto Sans Mono";
+
+        pointer-events: none;
+        user-select: none;
+        -webkit-user-select: none;
+        -webkit-user-drag: none;
     }
 </style>