Change body font from Roboto to Inter

src/components/MDX/H1.astro

@@ -1 +1 @@
-<h1 class="font-header text-3xl"><slot /></h1>
+<h1 class="text-3xl font-extrabold"><slot /></h1>

src/components/MDX/H2.astro

@@ -1 +1 @@
-<h2 class="font-header text-2xl"><slot /></h2>
+<h2 class="text-2xl font-extrabold"><slot /></h2>

src/components/MDX/H3.astro

@@ -1 +1 @@
-<h3 class="font-header text-xl"><slot /></h3>
+<h3 class="text-xl font-bold"><slot /></h3>

src/components/MDX/H4.astro

@@ -1 +1 @@
-<h4 class="font-header text-lg"><slot /></h4>
+<h4 class="text-lg font-bold"><slot /></h4>

src/components/ProjectCard.astro

@@ -142,14 +142,14 @@ const link = `/projects/${slugify(project.data.type)}/${slugify(project.data.slu
     ]}
   >
     <span
-      ><h2 class="font-header-alt inline-block text-lg font-semibold">
+      ><h2 class="inline-block text-lg font-bold">
         {
           projectHasBody && (
             <TextLink href={link}>{project.data.title}</TextLink>
           )
         }{!projectHasBody && project.data.title}{
           !project.data.ongoing && (
-            <span class="text-sm font-light italic">
+            <span class="text-sm font-medium italic">
               {" "}
               ({project.data.date.getFullYear()})
             </span>
@@ -157,7 +157,7 @@ const link = `/projects/${slugify(project.data.type)}/${slugify(project.data.slu
         }
       </h2></span
     >
-    <h3 class="font-header-alt font-base font-medium">
+    <h3 class="font-semibold">
       {project.data.role}
     </h3>
     <div class="mt-2">

src/components/SectionTitle.astro

@@ -15,6 +15,6 @@ const {
 ---
 
 <div class={className}>
-  <Tag class="font-header m-0 text-center text-3xl"><slot /></Tag>
+  <Tag class="m-0 text-center text-3xl font-extrabold"><slot /></Tag>
   <hr class={`mx-auto my-4 w-16 border-2 ${lineColour} ${lineColourDark}`} />
 </div>

src/components/TrackCard.astro

@@ -36,10 +36,10 @@ if (!track.data.card) {
   <div
     class="bg-primary absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center p-16 text-center opacity-0 transition duration-300 hover:opacity-90"
   >
-    <span class="font-header text-md md:text-l block text-gray-100"
+    <span class="text-md md:text-l block font-bold text-gray-100"
       >{track.data.card.text.secondary}</span
     >
-    <span class="font-header block text-xl font-medium uppercase md:text-2xl"
+    <span class="block text-xl font-extrabold uppercase md:text-2xl"
       >{track.data.card.text.primary}</span
     >
   </div>

src/pages/index.astro

@@ -216,7 +216,7 @@ const tracks = (
           interval={1000}
           transitionDuration="duration-500"
           quality={5}
-          height={256}
+          height={384}
           shuffle={true}
         />
       </div>

src/styles/global.css

@@ -1,5 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
+@import "../../public/fonts/inter/inter.css";
 @import "tailwindcss";
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 
@@ -19,7 +20,7 @@
 
   --font-header: "Lutschine Bold", sans-serif;
   --font-header-alt: "Lutschine Regular", sans-serif;
-  --font-body: "Roboto", sans-serif;
+  --font-body: InterVariable, sans-serif;
   --font-mono: "Fira Code", monospace;
 
   --animate-floaty: floaty 18s forwards linear infinite;
@@ -87,7 +88,7 @@
   }
 
   html {
-    font-family: "Roboto", sans-serif;
+    font-family: InterVariable, sans-serif;
     @apply text-gray-600 dark:text-white;
   }