From 67668d21e4575fc8ac92669d5da792a6790f31b9 Mon Sep 17 00:00:00 2001
From: Alan Daniel <stylesshjs@gmail.com>
Date: Wed, 27 May 2026 12:03:45 -0400
Subject: [PATCH] docs: scope Manrope to main page titles only

Headings inside MDX content now use Inter to match body copy.
Manrope stays on the per-page main title and the homepage hero/section titles.
---
 apps/docs/components/HomePageCover.tsx           |  4 ++--
 apps/docs/features/docs/GuidesMdx.template.tsx   |  2 +-
 apps/docs/features/docs/Reference.header.tsx     |  6 ++----
 apps/docs/features/docs/Troubleshooting.page.tsx |  9 +++++----
 apps/docs/features/docs/Troubleshooting.ui.tsx   | 10 +++++-----
 apps/docs/features/ui/guide/GuideHeader.tsx      |  3 ++-
 apps/docs/styles/globals.css                     | 12 +++---------
 7 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index 92ba17cb22d..0e78b8c9ed6 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -131,7 +131,7 @@ const HomePageCover = (props) => {
             <IconBackground>
               <Play aria-hidden="true" className="text-brand-600 w-4" strokeWidth={2} />
             </IconBackground>
-            <h2 className="text-2xl m-0 text-foreground">Getting Started</h2>
+            <h2 className="font-heading text-2xl m-0 text-foreground">Getting Started</h2>
           </div>
           <p className="text-foreground-light text-sm">
             Set up and connect a database in just a few minutes.
@@ -164,7 +164,7 @@ const HomePageCover = (props) => {
         <div className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-start sm:items-center w-full max-w-xl xl:max-w-132">
           <DocsCoverLogo aria-hidden="true" />
           <div className="flex flex-col">
-            <h1 className="m-0 mb-3 text-2xl sm:text-3xl text-foreground">
+            <h1 className="font-heading m-0 mb-3 text-2xl sm:text-3xl text-foreground">
               {homepageHeading || props.title}
             </h1>
             <p className="m-0 text-foreground-light">
diff --git a/apps/docs/features/docs/GuidesMdx.template.tsx b/apps/docs/features/docs/GuidesMdx.template.tsx
index c3d5a5e2c3c..96548db3468 100644
--- a/apps/docs/features/docs/GuidesMdx.template.tsx
+++ b/apps/docs/features/docs/GuidesMdx.template.tsx
@@ -97,7 +97,7 @@ const GuideTemplate = ({
             id="sb-docs-guide-main-article"
             className="prose max-w-none"
           >
-            <h1 className="mb-0 [&>p]:m-0">
+            <h1 className="font-heading mb-0 [&>p]:m-0">
               <ReactMarkdown>{meta?.title || 'Supabase Docs'}</ReactMarkdown>
             </h1>
             {meta?.subtitle && (
diff --git a/apps/docs/features/docs/Reference.header.tsx b/apps/docs/features/docs/Reference.header.tsx
index 82946f133de..da24e93e1c3 100644
--- a/apps/docs/features/docs/Reference.header.tsx
+++ b/apps/docs/features/docs/Reference.header.tsx
@@ -1,10 +1,8 @@
+import MenuIconPicker from '~/components/Navigation/NavigationMenu/MenuIconPicker'
 import { Github } from 'lucide-react'
 import Link from 'next/link'
-
 import { cn } from 'ui'
 
-import MenuIconPicker from '~/components/Navigation/NavigationMenu/MenuIconPicker'
-
 interface ClientLibHeaderProps {
   menuData: {
     title: string
@@ -29,7 +27,7 @@ function ClientLibHeader({ menuData, className }: ClientLibHeaderProps) {
         />
       )}
       <div className="flex flex-col gap-2">
-        <h1 id="introduction" className="text-3xl text-foreground">
+        <h1 id="introduction" className="font-heading text-3xl text-foreground">
           {menuData.title} Client Library
         </h1>
         <span
diff --git a/apps/docs/features/docs/Troubleshooting.page.tsx b/apps/docs/features/docs/Troubleshooting.page.tsx
index 805623bbe5e..5899dbb7e8a 100644
--- a/apps/docs/features/docs/Troubleshooting.page.tsx
+++ b/apps/docs/features/docs/Troubleshooting.page.tsx
@@ -1,9 +1,10 @@
-import { Github } from 'lucide-react'
-import Link from 'next/link'
-import { cn } from 'ui'
 import Breadcrumbs from '~/components/Breadcrumbs'
 import { Feedback } from '~/components/Feedback'
 import { SidebarSkeleton } from '~/layouts/MainSkeleton'
+import { Github } from 'lucide-react'
+import Link from 'next/link'
+import { cn } from 'ui'
+
 import { MDXRemoteBase } from './MdxBase'
 import { getTroubleshootingUpdatedDates, type ITroubleshootingEntry } from './Troubleshooting.utils'
 import { formatError, serializeTroubleshootingSearchParams } from './Troubleshooting.utils.shared'
@@ -21,7 +22,7 @@ export default async function TroubleshootingPage({ entry }: { entry: ITroublesh
       <div className="px-5 py-8 lg:px-0 lg:py-0">
         <Breadcrumbs minLength={1} forceDisplayOnMobile />
         <article className="prose max-w-none mt-4">
-          <h1>{entry.data.title}</h1>
+          <h1 className="font-heading">{entry.data.title}</h1>
           {dateUpdated && (
             <p className="text-sm text-foreground-lighter">
               Last edited: {dateUpdated.toLocaleDateString()}
diff --git a/apps/docs/features/docs/Troubleshooting.ui.tsx b/apps/docs/features/docs/Troubleshooting.ui.tsx
index ddad25e7c1f..3a6a03dd51c 100644
--- a/apps/docs/features/docs/Troubleshooting.ui.tsx
+++ b/apps/docs/features/docs/Troubleshooting.ui.tsx
@@ -1,18 +1,18 @@
 import Link from 'next/link'
 import { Fragment } from 'react'
-
 import { cn } from 'ui'
+
 import { TroubleshootingFilter } from './Troubleshooting.ui.client'
 import {
-  type ITroubleshootingEntry,
-  type ITroubleshootingMetadata,
   getArticleSlug,
   getTroubleshootingUpdatedDates,
+  type ITroubleshootingEntry,
+  type ITroubleshootingMetadata,
 } from './Troubleshooting.utils'
 import {
   formatError,
-  TROUBLESHOOTING_DATA_ATTRIBUTES,
   TROUBLESHOOTING_CONTAINER_ID,
+  TROUBLESHOOTING_DATA_ATTRIBUTES,
 } from './Troubleshooting.utils.shared'
 
 export async function TroubleshootingPreview({ entry }: { entry: ITroubleshootingEntry }) {
@@ -104,7 +104,7 @@ export function TroubleshootingHeader({
   return (
     <div className="lg:sticky lg:top-(--header-height) lg:z-10 bg-background">
       <div className="pt-8 pb-6 px-5">
-        <h1 className="text-4xl tracking-tight mb-7">{title}</h1>
+        <h1 className="font-heading text-4xl tracking-tight mb-7">{title}</h1>
         <p className="text-lg text-foreground-light">{description}</p>
         <hr className="my-7" aria-hidden />
         <TroubleshootingFilter
diff --git a/apps/docs/features/ui/guide/GuideHeader.tsx b/apps/docs/features/ui/guide/GuideHeader.tsx
index 034adb0eed0..280fb55c79e 100644
--- a/apps/docs/features/ui/guide/GuideHeader.tsx
+++ b/apps/docs/features/ui/guide/GuideHeader.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import ReactMarkdown from 'react-markdown'
+
 import { useGuide } from './Guide'
 
 interface GuideHeaderProps {
@@ -12,7 +13,7 @@ export function GuideHeader({ className }: GuideHeaderProps) {
 
   return (
     <div className={className}>
-      <h1 className="mb-0 [&>p]:m-0">
+      <h1 className="font-heading mb-0 [&>p]:m-0">
         <ReactMarkdown>{meta?.title || 'Supabase Docs'}</ReactMarkdown>
       </h1>
       {meta?.subtitle && (
diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index bf011213233..5d44390384e 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -15,6 +15,9 @@
   .prose--remove-p-margin p {
     margin: 0;
   }
+  .font-heading {
+    font-family: var(--font-heading);
+  }
 }
 
 @layer base {
@@ -41,15 +44,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-heading);
-}
-
 ::selection {
   background-color: #6ee7b7 !important;
   color: #333 !important;