diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 943bc14..87a18e8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
-import { Public_Sans } from "next/font/google";
+import { Mulish } from "next/font/google";
 import { Inter } from "next/font/google";
 
 const montserrat = Montserrat({
@@ -57,6 +57,15 @@ const inter = Inter({
   subsets: ["latin"],
 });
 
+const mulish = Mulish({
+  variable: "--font-mulish",
+  subsets: ["latin"],
+});
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -66,7 +75,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${publicSans.variable} ${inter.variable} antialiased`} ${sourceSans3.variable} {notoSans.variable`} {inter.variable}} antialiased`}
+          className={`${mulish.variable} ${inter.variable} antialiased`} ${sourceSans3.variable} {notoSans.variable`} {inter.variable}} antialiased`}
         >
           <Tag />
           {children}
diff --git a/src/app/styles/base.css b/src/app/styles/base.css
index e6e4ae5..d97fa01 100644
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-mulish), sans-serif;
 }
