chore: correct usage of font family (@fehmer) (monkeytypegame#6793)

Author: fehmer

frontend/src/styles/fonts.scss

@@ -1,25 +1,25 @@
 @use "sass:map";
 
 @each $font, $config in $fonts {
-  $src: "/webfonts/" + map-get($config, "src");
+  $dir: "webfonts";
   $previewDir: "webfonts-preview";
   @if variable-exists(previewFontsPath) {
     $previewDir: $previewFontsPath;
   }
 
   @font-face {
-    font-family: $font;
+    font-family: "#{$font}";
     font-style: normal;
     font-weight: map-get($config, "weight");
     font-display: block;
-    src: url($src) format("woff2");
+    src: url("/#{$dir}/#{map-get($config, 'src')}") format("woff2");
   }
 
   @font-face {
-    font-family: $font + " Preview";
+    font-family: "#{$font} Preview";
     font-style: normal;
     font-weight: map-get($config, "weight");
     font-display: block;
-    src: url("/" + $previewDir + "/" + map-get($config, "src")) format("woff2");
+    src: url("/#{$previewDir}/#{map-get($config, 'src')}") format("woff2");
   }
 }

frontend/src/ts/commandline/commandline.ts

@@ -525,7 +525,7 @@ async function showCommands(): Promise<void> {
           fontFamily += " Preview";
         }
 
-        html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="font-family: ${fontFamily}"><div class="icon">${finalIconHtml}</div><div>${display}</div></div>`;
+        html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="font-family: '${fontFamily}'"><div class="icon">${finalIconHtml}</div><div>${display}</div></div>`;
       }
     } else {
       html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="${customStyle}"><div class="icon">${finalIconHtml}</div><div>${display}</div></div>`;

frontend/src/ts/pages/settings.ts

@@ -590,7 +590,7 @@ async function fillSettingsPage(): Promise<void> {
       const activeClass = Config.fontFamily === name ? " active" : "";
       const display = font.display ?? name.replace(/_/g, " ");
 
-      fontsElHTML += `<button class="${activeClass}" style="font-family:${fontFamily}" data-config-value="${name}">${display}</button>`;
+      fontsElHTML += `<button class="${activeClass}" style="font-family:'${fontFamily}'" data-config-value="${name}">${display}</button>`;
     }
 
     fontsElHTML +=

frontend/static/themes/darling.css

@@ -9,5 +9,4 @@
   --error-extra-color: #2e7dde;
   --colorful-error-color: #2e7dde;
   --colorful-error-extra-color: #2e7dde;
-  --font: Roboto Mono;
 }