Attempt #3

package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@astrojs/node": "10.0.0-beta.5",
     "@astrojs/vue": "6.0.0-beta.1",
-    "@fontsource-variable/roboto-slab": "^5.2.8",
     "@tailwindcss/vite": "^4.2.1",
     "astro": "6.0.0-beta.15",
     "nodemailer": "^8.0.1",

src/layouts/Layout.astro

@@ -2,7 +2,6 @@
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import { siteConfig } from "../config/site";
-import "@fontsource-variable/roboto-slab";
 import "../styles/global.css";
 
 interface Props {
@@ -67,10 +66,10 @@ const isProd = import.meta.env.PROD;
         <link rel="canonical" href={siteUrl} />
         <link
             rel="preload"
+            href="/fonts/roboto.woff2"
             as="font"
             type="font/woff2"
-            href="/fonts/roboto.woff2"
+            crossorigin="anonymous"
-            crossorigin
         />
         <title>{metaTitle}</title>
         {

src/styles/global.css

@@ -40,6 +40,14 @@ html {
     scroll-behavior: smooth;
 }
 
-body {
+@font-face {
-    font-family: "Roboto Slab Variable", serif;
+    font-family: "Roboto Slab";
+    src: url("/fonts/roboto.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: block;
+}
+
+body {
+    font-family: "Roboto Slab", serif;
 }