diff --git a/src/app/(public)/blogs/(posts)/client-components.tsx b/src/app/(public)/blogs/(posts)/client-components.tsx
index 3cbd5a9..eb1fbd9 100644
--- a/src/app/(public)/blogs/(posts)/client-components.tsx
+++ b/src/app/(public)/blogs/(posts)/client-components.tsx
@@ -23,7 +23,7 @@ function useMetadata() {
 export function PostTitle() {
   const { title } = useMetadata();
   return (
-    <h1 className="text-3xl font-bold md:text-4xl blog-lg:text-5xl">
+    <h1 className="text-3xl font-medium md:text-4xl blog-lg:text-5xl">
       <Balancer>{title}</Balancer>
     </h1>
   );
diff --git a/src/app/(public)/blogs/page.tsx b/src/app/(public)/blogs/page.tsx
index 838f107..ab509ac 100644
--- a/src/app/(public)/blogs/page.tsx
+++ b/src/app/(public)/blogs/page.tsx
@@ -25,7 +25,7 @@ export default function Page() {
               return (
                 <PostCard slug={post.slug} key={post.slug}>
                   <div className="mx-auto flex w-full max-w-xl flex-col gap-3 p-6">
-                    <h2 className="text-lg font-bold md:text-xl">
+                    <h2 className="text-lg font-semibold md:text-xl">
                       <Balancer>{post.title}</Balancer>
                     </h2>
                     <p className="text-text-secondary">{post.description}</p>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c873f07..19b1f65 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,7 @@ import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import type { Metadata } from "next";
 import { AxiomWebVitals } from "next-axiom";
-import { Quattrocento_Sans as QuattrocentoSans } from "next/font/google";
+import { Hanken_Grotesk as HankenGrotesk } from "next/font/google";
 import localFont from "next/font/local";
 
 import { GitHub } from "~/components/icons";
@@ -12,7 +12,7 @@ import { cn } from "~/lib/cn";
 import { Background } from "./background";
 import "./globals.css";
 
-const sans = QuattrocentoSans({ subsets: ["latin"], weight: ["400", "700"], variable: "--sans" });
+const sans = HankenGrotesk({ subsets: ["latin"], variable: "--sans" });
 const mono = localFont({
   src: [
     { path: "../../.fonts/ia-writer-mono/regular.woff2", weight: "normal", style: "normal" },
diff --git a/src/components/og.tsx b/src/components/og.tsx
index e217c5e..be3ee77 100644
--- a/src/components/og.tsx
+++ b/src/components/og.tsx
@@ -9,10 +9,10 @@ function getFont() {
   return Promise.all(
     ([400, 700] as const).map(async weight => {
       const fontRes = await fetch(
-        `https://cdn.jsdelivr.net/fontsource/fonts/quattrocento-sans@latest/latin-${weight}-normal.woff`,
+        `https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk@latest/latin-${weight}-normal.woff`,
       );
       const font = await fontRes.arrayBuffer();
-      return { name: "quattrocento-sans", data: font, style: "normal", weight } as const;
+      return { name: "Hanken Grotesk", data: font, style: "normal" as const, weight };
     }),
   );
 }