fix: move fonts into CSS @layer vendor and inject @font-face rules for screenshots

frontend/src/styles/index.scss

@@ -15,9 +15,6 @@
   }
 }
 
-// the screenshotting library has some issues with css layers
-@import "fonts";
-
 @layer custom-styles {
   @import "buttons", "404", "ads", "account", "animations", "caret",
     "commandline", "core", "inputs", "keymap", "login", "monkey", "nav",

frontend/src/styles/vendor.scss

@@ -1,5 +1,3 @@
-@import "fontawesome-5"; // the screenshotting library has some issues with css layers
-
 /* fontawesome icon styles do not respect the hidden class from the hidden layer.
 * By having these rules outside any layer we make sure that the display none is
 * correctly applied when an element possesses both a .fa* class and the hidden class */
@@ -22,6 +20,8 @@
 
 @import "normalize.css" layer(normalize);
 @layer vendor {
+  @import "fontawesome-5";
+  @import "fonts";
   @import "slim-select/styles";
   @import "balloon-css/src/balloon";
 }

frontend/src/ts/test/test-screenshot.ts

@@ -157,10 +157,44 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
         const cs = getComputedStyle(el);
         return !(el.classList.contains("hidden") || cs.display === "none");
       },
+      // Extract and inject @font-face rules to work around CSS @layer issues
+      onCloneDocument: (clonedDoc) => {
+        // Extract all @font-face rules from stylesheets
+        const fontFaceRules: string[] = [];
+        for (const sheet of Array.from(document.styleSheets)) {
+          try {
+            for (const rule of Array.from(sheet.cssRules || [])) {
+              if (rule instanceof CSSFontFaceRule) {
+                fontFaceRules.push(rule.cssText);
+              }
+            }
+          } catch (e) {
+            // Skip stylesheets that can't be accessed (CORS)
+          }
+        }
+
+        // Inject @font-face rules into cloned document
+        if (fontFaceRules.length > 0) {
+          const styleEl = clonedDoc.createElement("style");
+          styleEl.textContent = fontFaceRules.join("\n");
+          clonedDoc.head.appendChild(styleEl);
+        }
+      },
       // Normalize the background layer so its negative z-index doesn't get hidden
-      onCloneEachNode: (cloned) => {
+      // Also copy font properties to work around CSS @layer issues
+      onCloneEachNode: (cloned, original) => {
         if (cloned instanceof HTMLElement) {
           const el = cloned;
+
+          // Copy font properties from original to ensure fonts work with CSS layers
+          if (original instanceof HTMLElement) {
+            const originalStyles = getComputedStyle(original);
+            el.style.fontFamily = originalStyles.fontFamily;
+            el.style.fontWeight = originalStyles.fontWeight;
+            el.style.fontSize = originalStyles.fontSize;
+            el.style.fontStyle = originalStyles.fontStyle;
+          }
+
           if (el.classList.contains("customBackground")) {
             el.style.zIndex = "0";
             el.style.width = `${targetWidth}px`;