feat: improve font loading

packages/base/Resources/Public/Scss/abstracts/_fonts.scss

@@ -1,27 +1,22 @@
 // The fonts available are OTF and TTF. Modern browsers prefer WOFF/WOFF2,
-// but we'll use TTF/OTF here.
-// We assume main.css is compiled into Resources/Public/Css, so to reach Fonts: ../Fonts/
-// Make sure filenames match exactly (case-sensitive) and spaces are escaped or handled properly.
+// Ideally, providing WOFF2 versions would be best practice for performance.
+// Add font-display to improve Google PageSpeed rendering.
 
-// Hajime Sans (no weight variations provided other than normal)
 @font-face {
   font-family: 'Hajime Sans';
   src: url('../Fonts/Hajime Sans.ttf') format('truetype'),
        url('../Fonts/Hajime Sans.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 
-// Inter as a variable font:
-// The Inter variable fonts likely contain multiple weights.
-// We'll define one face for normal and one for italic using the variable font files.
-// Define the weight range if needed (e.g., font-weight: 100 900 for variable range).
-
 @font-face {
   font-family: 'Inter';
   src: url('../Fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
   font-weight: 100 900; // Adjust as needed for variable font range
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -29,15 +24,14 @@
   src: url('../Fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
   font-weight: 100 900;
   font-style: italic;
+  font-display: swap;
 }
 
-// Use Inter for body text
 body {
   font-family: 'Inter', sans-serif;
   font-weight: 500;
 }
 
-// Use Hajime Sans for headlines
 h1, h2, h3 {
   font-family: 'Hajime Sans', sans-serif;
   color: var(--bs-primary);
@@ -58,8 +52,6 @@ a {
     font-weight: 700;
 }
 
-
-// Use Hajime Sans for buttons as well
 button, .btn {
   font-family: 'Hajime Sans', sans-serif;
   font-weight: 400;