fix: change font preloading

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

@@ -49,17 +49,45 @@ page {
     test_scripts = EXT:base/Resources/Public/JavaScript/main.js
   }
 
-  # Preload fonts to improve rendering performance
+  # Use includeAssets to properly preload fonts with TYPO3 v13 asset handling.
-  # Ensure fonts exist in the specified directory and consider converting them to WOFF2 for better performance.
+  # Make sure the font filenames do not have spaces. Convert them to use hyphens or underscores.
-  headerData {
+  # After that, the AssetCollector will handle publishing to _assets folder.
-    30 = TEXT
+  includeAssets {
-    30.value = <link rel="preload" href="EXT:base/Resources/Public/Fonts/Hajime%20Sans.ttf" as="font" type="font/ttf" crossorigin>
+    hajimeSansTtf {
+      path = EXT:base/Resources/Public/Fonts/Hajime-Sans.ttf
+      type = font
+      resourceType = font
+      preload = 1
+      as = font
+      attributes {
+        type = font/ttf
+        crossorigin = anonymous
+      }
+    }
 
-    40 = TEXT
+    interVariable {
-    40.value = <link rel="preload" href="EXT:base/Resources/Public/Fonts/Inter-VariableFont_opsz,wght.ttf" as="font" type="font/ttf" crossorigin>
+      path = EXT:base/Resources/Public/Fonts/Inter-VariableFont_opsz,wght.ttf
+      type = font
+      resourceType = font
+      preload = 1
+      as = font
+      attributes {
+        type = font/ttf
+        crossorigin = anonymous
+      }
+    }
 
-    50 = TEXT
+    interVariableItalic {
-    50.value = <link rel="preload" href="EXT:base/Resources/Public/Fonts/Inter-Italic-VariableFont_opsz,wght.ttf" as="font" type="font/ttf" crossorigin>
+      path = EXT:base/Resources/Public/Fonts/Inter-Italic-VariableFont_opsz,wght.ttf
+      type = font
+      resourceType = font
+      preload = 1
+      as = font
+      attributes {
+        type = font/ttf
+        crossorigin = anonymous
+      }
+    }
   }
 }
 

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

@@ -1,11 +1,8 @@
-// The fonts available are OTF and TTF. Modern browsers prefer WOFF/WOFF2,
+// Update font file names and ensure no spaces for better compatibility.
-// Ideally, providing WOFF2 versions would be best practice for performance.
-// Add font-display to improve Google PageSpeed rendering.
-
 @font-face {
   font-family: 'Hajime Sans';
-  src: url('../Fonts/Hajime Sans.ttf') format('truetype'),
+  src: url('../Fonts/Hajime-Sans.ttf') format('truetype'),
-       url('../Fonts/Hajime Sans.otf') format('opentype');
+       url('../Fonts/Hajime-Sans.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;