impr(fonts): improve letter-wise feedback of Arabic script default font (@nadalaba)

frontend/scripts/check-assets.ts

@@ -344,7 +344,7 @@ async function validateFonts(): Promise<void> {
   //no missing files
   const ignoredFonts = new Set([
     "GallaudetRegular.woff2", //used for asl
-    "Vazirmatn-Regular.woff2", //default font
+    "Vazirharf-NL-Regular.woff2", //default font
   ]);
 
   const fontFiles = fs

frontend/src/styles/core.scss

@@ -1,6 +1,6 @@
 :root {
   --roundness: 0.5rem;
-  --font: "Roboto Mono", "Vazirmatn", monospace;
+  --font: "Roboto Mono", "Vazirharf", monospace;
   // scroll-behavior: smooth;
   scroll-padding-top: 2rem;
   font-weight: 400;

frontend/src/styles/fonts.scss

@@ -1,11 +1,11 @@
 @use "sass:map";
 
 @font-face {
-  font-family: "Vazirmatn";
+  font-family: "Vazirharf";
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("/webfonts/Vazirmatn-Regular.woff2") format("woff2");
+  src: url("/webfonts/Vazirharf-NL-Regular.woff2") format("woff2");
 }
 
 @each $font, $config in $fonts {

frontend/src/ts/controllers/theme-controller.ts

@@ -314,7 +314,7 @@ export async function applyFontFamily(): Promise<void> {
 
   document.documentElement.style.setProperty(
     "--font",
-    `"${font}", "Roboto Mono", "Vazirmatn", monospace`,
+    `"${font}", "Roboto Mono", "Vazirharf", monospace`,
   );
 }
 

frontend/src/ts/ui.ts

@@ -19,7 +19,9 @@ let isPreviewingFont = false;
 export function previewFontFamily(font: FontName): void {
   document.documentElement.style.setProperty(
     "--font",
-    '"' + font.replaceAll(/_/g, " ") + '", "Roboto Mono", "Vazirmatn"',
+    '"' +
+      font.replaceAll(/_/g, " ") +
+      '", "Roboto Mono", "Vazirharf", "monospace"',
   );
   void TestUI.updateHintsPositionDebounced();
   isPreviewingFont = true;