Maybe this helps?

astro.config.mjs

@@ -13,6 +13,9 @@ import icon from "astro-icon";
 export default defineConfig({
   output: "server",
   prefetch: true,
+  build: {
+    inlineStylesheets: "always",
+  },
   integrations: [solidJs(), icon()],
 
   adapter: node({

src/components/Header.astro

@@ -1,13 +1,22 @@
 ---
 import { siteConfig } from "../config/site";
 import { Icon } from "astro-icon/components";
+import { Image } from "astro:assets";
 ---
 
-<header class="sticky top-0 z-50 backdrop-blur-lg bg-base-100/80 border-b border-base-200" role="banner">
+<header
+    class="sticky top-0 z-50 backdrop-blur-lg bg-base-100/80 border-b border-base-200"
+    role="banner"
+>
     <div class="navbar max-w-7xl mx-auto px-4 lg:px-6">
         <div class="navbar-start">
             <div class="dropdown">
-                <div tabindex="0" role="button" class="btn btn-ghost btn-circle lg:hidden" aria-label="Open menu">
+                <div
+                    tabindex="0"
+                    role="button"
+                    class="btn btn-ghost btn-circle lg:hidden"
+                    aria-label="Open menu"
+                >
                     <Icon name="heroicons:bars-3-bottom-left" class="h-5 w-5" />
                 </div>
                 <ul
@@ -18,7 +27,11 @@ import { Icon } from "astro-icon/components";
                     {
                         siteConfig.header.nav.map(({ text, href }) => (
                             <li role="none">
-                                <a href={href} role="menuitem" class="py-3 px-4 rounded-lg font-medium hover:bg-primary/10 hover:text-primary transition-colors">
+                                <a
+                                    href={href}
+                                    role="menuitem"
+                                    class="py-3 px-4 rounded-lg font-medium hover:bg-primary/10 hover:text-primary transition-colors"
+                                >
                                     {text}
                                 </a>
                             </li>
@@ -31,9 +44,19 @@ import { Icon } from "astro-icon/components";
                 class="btn btn-ghost text-xl font-bold tracking-tight hover:bg-transparent hover:text-primary transition-colors gap-2"
                 aria-label="Home"
             >
-                <img src="/logo.svg" alt="" width="32" height="32" class="h-8 w-8" aria-hidden="true" />
+                <Image
-                <span class="hidden sm:inline">{siteConfig.header.logo.text}</span>
+                    src="/logo.svg"
-                <span class="sm:hidden">{siteConfig.header.mobileLogoText}</span>
+                    alt=""
+                    width="32"
+                    height="32"
+                    class="h-8 w-8"
+                    aria-hidden="true"
+                />
+                <span class="hidden sm:inline"
+                    >{siteConfig.header.logo.text}</span
+                >
+                <span class="sm:hidden">{siteConfig.header.mobileLogoText}</span
+                >
             </a>
         </div>
         <nav class="navbar-center hidden lg:flex" aria-label="Main navigation">
@@ -41,7 +64,11 @@ import { Icon } from "astro-icon/components";
                 {
                     siteConfig.header.nav.map(({ text, href }) => (
                         <li role="none">
-                            <a href={href} role="menuitem" class="font-medium px-4 py-2 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors">
+                            <a
+                                href={href}
+                                role="menuitem"
+                                class="font-medium px-4 py-2 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors"
+                            >
                                 {text}
                             </a>
                         </li>

src/layouts/Layout.astro

@@ -3,7 +3,6 @@ import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import { siteConfig } from "../config/site";
 import "../styles/global.css";
-import "@fontsource-variable/inter";
 
 interface Props {
     title?: string;

src/styles/global.css

@@ -36,12 +36,25 @@
     --noise: 0;
 }
 
+@font-face {
+    font-family: "Roboto Slab";
+    src: url("../assets/fonts/RobotoSlab-VariableFont_wght.ttf")
+        format("truetype");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+}
+
 html {
     scroll-behavior: smooth;
 }
 
 body {
-    font-family: 'Inter Variable', system-ui, -apple-system, sans-serif;
+    font-family:
+        "Roboto Slab",
+        system-ui,
+        -apple-system,
+        sans-serif;
 }
 
 .text-rotate:hover,