Prevent font loading layout shifts

Author: zayenz

src/layouts/BaseLayout.astro

@@ -3,6 +3,8 @@ import Sidebar from "../components/Sidebar.astro";
 import MobileNavigation from "../components/MobileNavigation.astro";
 import { canonicalSitePath, site } from "../data/site";
 import type { NewsItem } from "../lib/legacy-content";
+import openSansRegularUrl from "../../fonts/Open_Sans/OpenSans-Regular.woff2?url";
+import ralewayMediumUrl from "../../fonts/Raleway/Raleway-Medium.woff2?url";
 import "../styles/global.css";
 
 interface Props {
@@ -57,6 +59,8 @@ const structuredData = article
     <meta name="description" content={description} />
     <meta name="keywords" content="gecode, constraint programming, constraint solver, constraint toolkit" />
     <meta name="generator" content={Astro.generator} />
+    <link rel="preload" href={openSansRegularUrl} as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href={ralewayMediumUrl} as="font" type="font/woff2" crossorigin />
     {errorPage && <meta name="robots" content="noindex" />}
     {!errorPage && <link rel="canonical" href={canonical} />}
     <link rel="icon" href="/images/gecode-logo.ico" sizes="any" />

src/styles/global.css

@@ -8,7 +8,7 @@
        url("../../fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  font-display: optional;
 }
 
 @font-face {
@@ -17,7 +17,7 @@
        url("../../fonts/Open_Sans/OpenSans-RegularItalic.ttf") format("truetype");
   font-style: italic;
   font-weight: 400;
-  font-display: swap;
+  font-display: optional;
 }
 
 @font-face {
@@ -26,7 +26,7 @@
        url("../../fonts/Raleway/Raleway-Medium.ttf") format("truetype");
   font-style: normal;
   font-weight: 500;
-  font-display: swap;
+  font-display: optional;
 }
 
 @font-face {
@@ -35,7 +35,7 @@
        url("../../fonts/Raleway/Raleway-MediumItalic.ttf") format("truetype");
   font-style: italic;
   font-weight: 500;
-  font-display: swap;
+  font-display: optional;
 }
 
 @font-face {
@@ -44,7 +44,7 @@
        url("../../fonts/Roboto_Mono/RobotoMono-Regular.ttf") format("truetype");
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  font-display: optional;
 }
 
 @font-face {
@@ -53,7 +53,7 @@
        url("../../fonts/Roboto_Mono/RobotoMono-RegularItalic.ttf") format("truetype");
   font-style: italic;
   font-weight: 400;
-  font-display: swap;
+  font-display: optional;
 }
 
 @theme {