diff --git a/app/changelog/globals.css b/app/changelog/globals.css
index 5a21f3c3fc908..d2c8a0b8c2623 100644
--- a/app/changelog/globals.css
+++ b/app/changelog/globals.css
@@ -4,6 +4,9 @@
 @tailwind components;
 @tailwind utilities;
 
+#changelogcontent {
+  font-family: var(--font-rubik);
+}
 .radix-themes {
   --cursor-button: pointer;
 }
diff --git a/app/changelog/layout.tsx b/app/changelog/layout.tsx
index 4efff430ef4f6..86122ed98c466 100644
--- a/app/changelog/layout.tsx
+++ b/app/changelog/layout.tsx
@@ -13,6 +13,7 @@ const rubik = Rubik({
   weight: ['400', '500', '700'],
   style: ['normal', 'italic'],
   subsets: ['latin'],
+  variable: '--font-rubik',
 });
 
 export const metadata: Metadata = {
@@ -23,7 +24,7 @@ export default function ChangelogLayout({children}: {children: ReactNode}) {
   return (
     <Theme accentColor="violet" grayColor="sand" radius="large" scaling="95%">
       <NextTopLoader color="#8d5494" />
-      <div className={`${rubik.className}`}>
+      <div id="changelogcontent" className={`${rubik.variable}`}>
         <Navbar />
         <div className="bg-gray-100">{children}</div>
         <div className="w-full mx-auto h-16 relative bg-darkPurple">