add variable font

src/components/cta.astro

@@ -4,7 +4,9 @@ import Link from "./ui/link.astro";
 
 <div
   class="bg-black p-8 md:px-20 md:py-20 mt-20 mx-auto max-w-5xl rounded-lg flex flex-col items-center text-center">
-  <h2 class="text-white text-4xl md:text-6xl">Build faster websites.</h2>
+  <h2 class="text-white text-4xl md:text-6xl tracking-tight">
+    Build faster websites.
+  </h2>
   <p class="text-slate-400 mt-4 text-lg md:text-xl">
     Pull content from anywhere and serve it fast with Astro's next-gen island
     architecture.

src/components/hero.astro

@@ -15,7 +15,8 @@ import { Icon } from "astro-icon";
     />
   </div>
   <div>
-    <h1 class="text-5xl lg:text-6xl xl:text-7xl font-bold lg:tracking-tight">
+    <h1
+      class="text-5xl lg:text-6xl xl:text-7xl font-bold lg:tracking-tight xl:tracking-tighter">
       Marketing website done with Astro
     </h1>
     <p class="text-lg mt-4 text-slate-600 max-w-xl">

tailwind.config.cjs

@@ -5,7 +5,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["Inter", ...defaultTheme.fontFamily.sans],
+        sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
       },
     },
   },