From dc86590e6ae0fe5d241fc1a8b8a1eeb707f5bad5 Mon Sep 17 00:00:00 2001
From: "Paul W." <lambdapaul@protonmail.com>
Date: Thu, 2 Nov 2023 17:14:15 -0400
Subject: [PATCH] Add font-display to custom fonts to avoid FOIT

Signed-off-by: Paul W. <lambdapaul@protonmail.com>
---
 styles/global.css | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/styles/global.css b/styles/global.css
index d0c233d..a454e17 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -17,6 +17,7 @@
     src: url('/assets/fonts/Cantarell/Cantarell-Regular.otf') format('opentype');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -24,6 +25,7 @@
     src: url('/assets/fonts/Cantarell/Cantarell-Thin.otf') format('opentype');
     font-weight: 100;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -31,6 +33,7 @@
     src: url('/assets/fonts/Cantarell/Cantarell-Light.otf') format('opentype');
     font-weight: 300;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -38,6 +41,7 @@
     src: url('/assets/fonts/Cantarell/Cantarell-Bold.otf') format('opentype');
     font-weight: bold;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -45,6 +49,7 @@
     src: url('/assets/fonts/Cantarell/Cantarell-ExtraBold.otf') format('opentype');
     font-weight: 800;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -52,6 +57,7 @@
     src: url('/assets/fonts/EB_Garamond/static/EBGaramond-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -59,6 +65,7 @@
     src: url('/assets/fonts/EB_Garamond/static/EBGaramond-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -66,34 +73,39 @@
     src: url('/assets/fonts/EB_Garamond/static/EBGaramond-ExtraBold.ttf') format('truetype');
     font-weight: 800;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
     font-family: 'Hack';
-    src: url('/assets/fonts/Hack/hack-regular-subset.woff2?sha=3114f1256') format('woff2'), url('/assets/fonts/Hack/hack-regular-subset.woff?sha=3114f1256') format('woff');
+    src: url('/assets/fonts/Hack/hack-regular-subset.woff2') format('woff2'), url('/assets/fonts/Hack/hack-regular-subset.woff') format('woff');
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
     font-family: 'Hack';
-    src: url('/assets/fonts/Hack/hack-bold-subset.woff2?sha=3114f1256') format('woff2'), url('/assets/fonts/Hack/hack-bold-subset.woff?sha=3114f1256') format('woff');
+    src: url('/assets/fonts/Hack/hack-bold-subset.woff2') format('woff2'), url('/assets/fonts/Hack/hack-bold-subset.woff') format('woff');
     font-weight: 700;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
     font-family: 'Hack';
-    src: url('/assets/fonts/Hack/hack-italic-subset.woff2?sha=3114f1256') format('woff2'), url('/assets/fonts/Hack/hack-italic-webfont.woff?sha=3114f1256') format('woff');
+    src: url('/assets/fonts/Hack/hack-italic-subset.woff2') format('woff2'), url('/assets/fonts/Hack/hack-italic-webfont.woff') format('woff');
     font-weight: 400;
     font-style: italic;
+    font-display: swap;
 }
 
 @font-face {
     font-family: 'Hack';
-    src: url('/assets/fonts/Hack/hack-bolditalic-subset.woff2?sha=3114f1256') format('woff2'), url('/assets/fonts/Hack/hack-bolditalic-subset.woff?sha=3114f1256') format('woff');
+    src: url('/assets/fonts/Hack/hack-bolditalic-subset.woff2') format('woff2'), url('/assets/fonts/Hack/hack-bolditalic-subset.woff') format('woff');
     font-weight: 700;
     font-style: italic;
+    font-display: swap;
 }
 
 * {