diff --git a/src/app/conf/2023/layout.tsx b/src/app/conf/2023/layout.tsx
index 4669949d2c..6b3f04a9db 100644
--- a/src/app/conf/2023/layout.tsx
+++ b/src/app/conf/2023/layout.tsx
@@ -4,6 +4,7 @@ import { Header } from "../_components/header"
 import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
+import { OldFontsStyleTag } from "../../fonts/old-fonts"
 
 export const metadata = {
   description:
@@ -33,6 +34,7 @@ export default function ConfLayout({
   const hover = "#c026d3"
   return (
     <>
+      <OldFontsStyleTag />
       <style>{`
         .text-primary,
         .hover\\:text-primary:hover {
diff --git a/src/app/conf/2024/layout.tsx b/src/app/conf/2024/layout.tsx
index 8e62aeed30..1e26638db0 100644
--- a/src/app/conf/2024/layout.tsx
+++ b/src/app/conf/2024/layout.tsx
@@ -4,6 +4,7 @@ import { Header } from "../_components/header"
 import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
+import { OldFontsStyleTag } from "../../fonts/old-fonts"
 
 export const metadata = {
   description:
@@ -30,6 +31,7 @@ export default function Layout({
 }): ReactElement {
   return (
     <>
+      <OldFontsStyleTag />
       <Header
         logo={
           <NextLink
diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx
index b60c004237..280141b2d3 100644
--- a/src/app/conf/2025/layout.tsx
+++ b/src/app/conf/2025/layout.tsx
@@ -4,12 +4,7 @@ import { Header } from "../_components/header"
 import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
-import { Rubik } from "next/font/google"
-
-const rubik = Rubik({
-  weight: ["700", "600", "500", "400", "300"],
-  subsets: ["latin"],
-})
+import { NewFontsStyleTag } from "../../fonts"
 
 export const metadata = {
   description:
@@ -36,6 +31,7 @@ export default function Layout({
 }): ReactElement {
   return (
     <>
+      <NewFontsStyleTag />
       <Header
         logo={
           <NextLink
@@ -56,13 +52,7 @@ export default function Layout({
         ]}
         is2025
       />
-      <div
-        style={{
-          fontFamily: rubik.style.fontFamily,
-        }}
-      >
-        {children}
-      </div>
+      <div>{children}</div>
       <Footer
         logo={
           <NextLink href="/conf/2025" className="nextra-logo text-white">
diff --git a/src/app/fonts/CommitMono-VariableFont.woff2 b/src/app/fonts/CommitMono-VariableFont.woff2
new file mode 100644
index 0000000000..f9ac1ee498
Binary files /dev/null and b/src/app/fonts/CommitMono-VariableFont.woff2 differ
diff --git a/src/app/fonts/HostGrotesk-Italic-VariableFont_wght.woff2 b/src/app/fonts/HostGrotesk-Italic-VariableFont_wght.woff2
new file mode 100644
index 0000000000..32f2878065
Binary files /dev/null and b/src/app/fonts/HostGrotesk-Italic-VariableFont_wght.woff2 differ
diff --git a/src/app/fonts/HostGrotesk-VariableFont_wght.woff2 b/src/app/fonts/HostGrotesk-VariableFont_wght.woff2
new file mode 100644
index 0000000000..a07056dc7d
Binary files /dev/null and b/src/app/fonts/HostGrotesk-VariableFont_wght.woff2 differ
diff --git a/src/app/fonts/index.tsx b/src/app/fonts/index.tsx
new file mode 100644
index 0000000000..7293ad719f
--- /dev/null
+++ b/src/app/fonts/index.tsx
@@ -0,0 +1,30 @@
+import localFont from "next/font/local"
+
+export const hostGrotesk = localFont({
+  src: [
+    { path: "./HostGrotesk-VariableFont_wght.woff2" },
+    { path: "./HostGrotesk-Italic-VariableFont_wght.woff2", style: "italic" },
+  ],
+  weight: "300 800",
+})
+
+export const commitMono = localFont({
+  src: "./CommitMono-VariableFont.woff2",
+  weight: "200 700",
+  declarations: [
+    {
+      prop: "font-feature-settings",
+      value: "'ss01' on, 'ss02' on, 'ss04' on, 'ss05' on, 'cv08' on",
+    },
+  ],
+})
+
+const newFontsStyles = /* css */ `
+html {
+  --font-sans: ${hostGrotesk.style.fontFamily};
+  --font-mono: ${commitMono.style.fontFamily};
+}`
+
+export const NewFontsStyleTag = () => {
+  return <style dangerouslySetInnerHTML={{ __html: newFontsStyles }} />
+}
diff --git a/src/app/fonts/old-fonts.tsx b/src/app/fonts/old-fonts.tsx
new file mode 100644
index 0000000000..e1dd37b937
--- /dev/null
+++ b/src/app/fonts/old-fonts.tsx
@@ -0,0 +1,14 @@
+import { Roboto_Flex } from "next/font/google"
+
+export const robotoFlex = Roboto_Flex({
+  subsets: ["latin"],
+})
+
+const oldFontsStyles = /* css */ `
+html {
+  --font-sans: ${robotoFlex.style.fontFamily};
+}`
+
+export const OldFontsStyleTag = () => {
+  return <style dangerouslySetInnerHTML={{ __html: oldFontsStyles }} />
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 574cde150d..2e2ad5a2fb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,13 +1,8 @@
 import { ReactElement, ReactNode } from "react"
 import { Metadata } from "next"
-import { Roboto_Flex } from "next/font/google"
 import GoogleAnalytics from "@/app/ga"
 import "../globals.css"
 
-const font = Roboto_Flex({
-  subsets: ["latin"],
-})
-
 export const metadata: Metadata = {
   twitter: {
     site: "@graphql",
@@ -28,7 +23,7 @@ export default function RootLayout({
   children: ReactNode
 }): ReactElement {
   return (
-    <html lang="en" className={`scroll-smooth ${font.className}`}>
+    <html lang="en" className="scroll-smooth">
       <head>
         <style>{`html { scroll-padding-top: 5rem }`}</style>
       </head>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6a71eba9d0..9db1732ed5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,6 @@
 import type { Config } from "tailwindcss"
 import typography from "@tailwindcss/typography"
+import { fontFamily } from "tailwindcss/defaultTheme"
 
 const config: Config = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./theme.config.tsx"],
@@ -9,6 +10,16 @@ const config: Config = {
       padding: "1rem",
     },
     extend: {
+      fontFamily: {
+        sans: [
+          `var(--font-sans, ${fontFamily.sans.slice(0, 3).join(", ")})`,
+          ...fontFamily.sans,
+        ],
+        mono: [
+          `var(--font-mono, ${fontFamily.mono.slice(0, 3).join(", ")})`,
+          ...fontFamily.mono,
+        ],
+      },
       colors: {
         primary: "#e10098",
         "conf-black": "#0e031c",