diff --git a/src/app/layout.css b/src/app/layout.css
index 32a08d361..7a8709d1d 100644
--- a/src/app/layout.css
+++ b/src/app/layout.css
@@ -2,3 +2,7 @@
 html {
   scroll-behavior: smooth;
 }
+
+.radix-themes {
+  --default-font-family: var(--font-inter);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3de77ed76..86629c2c4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -22,6 +22,7 @@ interface RootLayoutProps {
 const robotoFlex = Roboto_Flex({
   subsets: ['latin'],
   display: 'swap',
+  variable: '--font-roboto-flex',
 });
 
 export default function RootLayout({ children }: RootLayoutProps) {