feat(web): add more a11y and make preload more efficientHEADmain

2 files changed, 30 insertions, 4 deletions

diff --git a/apps/website/src/components/shared/BaseHead.astro b/apps/website/src/components/shared/BaseHead.astro
index 39e98a7..4c878dd 100644
--- a/apps/website/src/components/shared/BaseHead.astro
+++ b/apps/website/src/components/shared/BaseHead.astro
@@ -1,6 +1,7 @@
 ---
 import smartypants from 'smartypants';
 import siteInfo from '../../data/site-info';
+import FontPreload from './FontPreload.astro';
 import SEO from './SEO.astro';
 import Favicon from '/media/polyfrost/minimal_bg.svg?url';
 
@@ -35,10 +36,7 @@ const resolvedImage = {
 <meta name="generator" content={Astro.generator} />
 
 <!-- Font Preloads -->
-<link rel="preconnect" href="https://fonts.googleapis.com"/>
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
-<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/>
+<FontPreload />
 
 <!-- Low Priority Global Metadata -->
 <link rel="icon" type="image/svg+xml" href={Favicon}/>
diff --git a/apps/website/src/components/shared/FontPreload.astro b/apps/website/src/components/shared/FontPreload.astro
new file mode 100644
index 0000000..a1f0cf1
--- /dev/null
+++ b/apps/website/src/components/shared/FontPreload.astro
@@ -0,0 +1,28 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+<link
+	href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+	rel="preload"
+	as="style"
+	onload="this.onload=null;this.rel='stylesheet'"
+/>
+<link
+	href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap"
+	rel="preload"
+	as="style"
+	onload="this.onload=null;this.rel='stylesheet'"
+/>
+
+<noscript>
+<link
+	href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+	rel="stylesheet"
+	type="text/css"
+/>
+<link
+	href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap"
+	rel="stylesheet"
+	type="text/css"
+/>
+</noscript>