Move fonts import to vendor.scss outside CSS layers

Co-authored-by: Miodec <13181393+Miodec@users.noreply.github.com>

Author: Copilot

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,4 +1,7 @@
-@import "fontawesome-5"; // the screenshotting library has some issues with css layers
+// the screenshotting library has some issues with css layers
+// keep fontawesome and fonts outside of any layer to ensure they work in screenshots
+@import "fontawesome-5";
+@import "fonts";
 
 /* 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