feat: improve font loading

packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript

@@ -48,6 +48,19 @@ page {
   includeJSFooter {
     test_scripts = EXT:base/Resources/Public/JavaScript/main.js
   }
+
+  # Preload fonts to improve rendering performance
+  # Ensure fonts exist in the specified directory and consider converting them to WOFF2 for better performance.
+  headerData {
+    30 = TEXT
+    30.value = <link rel="preload" href="EXT:base/Resources/Public/Fonts/Hajime%20Sans.ttf" as="font" type="font/ttf" crossorigin>
+
+    40 = TEXT
+    40.value = <link rel="preload" href="EXT:base/Resources/Public/Fonts/Inter-VariableFont_opsz,wght.ttf" as="font" type="font/ttf" crossorigin>
+
+    50 = TEXT
+    50.value = <link rel="preload" href="EXT:base/Resources/Public/Fonts/Inter-Italic-VariableFont_opsz,wght.ttf" as="font" type="font/ttf" crossorigin>
+  }
 }
 
 lib.contentElement {
@@ -72,4 +85,3 @@ lib.parseFunc_RTE {
     }
   }
 }
-

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.
+// Ideally, providing WOFF2 versions would be best practice for performance.
-// We assume main.css is compiled into Resources/Public/Css, so to reach Fonts: ../Fonts/
+// Add font-display to improve Google PageSpeed rendering.
-// Make sure filenames match exactly (case-sensitive) and spaces are escaped or handled properly.
 
-// 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;