diff --git a/components/Topbar.tsx b/components/Topbar.tsx
index f606acf..bb3b578 100644
--- a/components/Topbar.tsx
+++ b/components/Topbar.tsx
@@ -19,9 +19,13 @@ export default function Topbar() {
   return (
     <div class="top-0 z-50 fixed w-full bg-primary text-primary-content">
       <div class="container mx-auto flex items-center justify-between text-white p-4">
-        <a class="text-2xl font-bold" href="/">Arcane Tome</a>
+        <a class="text-3xl font-bold font-grenze" href="/">Arcane Tome</a>
         <div class="flex items-center space-x-4">
-          {links.map((link) => <Link href={link.href}>{link.text}</Link>)}
+          {links.map((link) => (
+            <Link href={link.href}>
+              <span class="font-grenze text-base">{link.text}</span>
+            </Link>
+          ))}
         </div>
       </div>
     </div>
diff --git a/routes/_app.tsx b/routes/_app.tsx
index cf87df3..5ad1e73 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -7,6 +7,11 @@ export default function App({ Component }: PageProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Arcane Tome</title>
         <link rel="stylesheet" href="/styles.css" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Grenze:wght@400;500;700&display=swap"
+          rel="stylesheet"
+        >
+        </link>
       </head>
       <body>
         <Component />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ebb8308..d329040 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,6 +9,13 @@ export default {
     // @ts-expect-error
     daisyui,
   ],
+  theme: {
+    extend: {
+      fontFamily: {
+        grenze: ["Grenze", "sans-serif"],
+      },
+    },
+  },
   daisyui: {
     themes: [
       "emerald",
