feat: www & docs fonts (#47227)

Update marketing website and docs with new sans-serif fonts:
- `Inter` - sans-serif for all body text
- `Manrope` - sans-serif for headings

PR breakdown of #43455 
Related: #47226 #47228 #47236

apps/docs/app/layout.tsx

@@ -12,6 +12,8 @@ import { TelemetryTagManager } from 'common'
 import { genFaviconData } from 'common/MetaFavicons/app-router'
 import type { Metadata, Viewport } from 'next'
 
+import { inter, manrope } from '@/fonts'
+
 const { metadataApplicationName, metadataTitle } = getCustomContent([
   'metadata:application_name',
   'metadata:title',
@@ -50,7 +52,7 @@ const viewport: Viewport = {
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" className={`${manrope.variable} ${inter.variable}`} suppressHydrationWarning>
       <body>
         <TelemetryTagManager />
         <GlobalProviders>

apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx

@@ -48,6 +48,7 @@ const TopNavBar: FC = () => {
             <div className="flex gap-2 items-center">
               <DevToolbarTrigger />
               <CommandMenuTriggerInput
+                className="[&>div>p]:text-foreground-lighter"
                 placeholder={
                   <>
                     Search

apps/docs/components/StepHikeCompact/index.tsx

@@ -80,7 +80,7 @@ const Step: FC<PropsWithChildren<IStep>> = ({ children, title, step }) => {
 const Details: FC<PropsWithChildren<IDetails>> = ({ children, title, fullWidth = false }) => {
   return (
     <div className={cn(fullWidth ? 'col-span-12' : 'col-span-5', 'ml-12', 'lg:ml-0')}>
-      <h3 className="mt-0 text-foreground text-base">{title}</h3>
+      <h3 className="not-prose mb-4 text-foreground text-base">{title}</h3>
       {children}
     </div>
   )

apps/docs/features/docs/GuidesMdx.template.tsx

@@ -101,9 +101,9 @@ const GuideTemplate = ({
               <ReactMarkdown>{meta?.title || 'Supabase Docs'}</ReactMarkdown>
             </h1>
             {meta?.subtitle && (
-              <h2 className="mt-3 text-xl text-foreground-light">
+              <div className="mt-6 not-prose [&_p]:text-xl [&_p]:leading-7 text-foreground-light [&>p]:m-0">
                 <ReactMarkdown>{meta.subtitle}</ReactMarkdown>
-              </h2>
+              </div>
             )}
             <hr className="not-prose border-t-0 border-b my-8" />
 

apps/docs/features/ui/guide/GuideHeader.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import ReactMarkdown from 'react-markdown'
+
 import { useGuide } from './Guide'
 
 interface GuideHeaderProps {
@@ -16,9 +17,9 @@ export function GuideHeader({ className }: GuideHeaderProps) {
         <ReactMarkdown>{meta?.title || 'Supabase Docs'}</ReactMarkdown>
       </h1>
       {meta?.subtitle && (
-        <h2 className="mt-3 text-xl text-foreground-light">
+        <div className="mt-6 not-prose [&_p]:text-xl [&_p]:leading-7 text-foreground-light [&>p]:m-0">
           <ReactMarkdown>{meta.subtitle}</ReactMarkdown>
-        </h2>
+        </div>
       )}
       <hr className="not-prose border-t-0 border-b my-8" />
     </div>

apps/docs/fonts/index.ts

@@ -0,0 +1,15 @@
+import { Inter, Manrope } from 'next/font/google'
+
+export const manrope = Manrope({
+  variable: '--font-manrope',
+  display: 'swap',
+  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  subsets: ['latin'],
+})
+
+export const inter = Inter({
+  variable: '--font-inter',
+  display: 'swap',
+  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  subsets: ['latin'],
+})

apps/docs/styles/globals.css

@@ -11,6 +11,29 @@
 @source './../../../packages/ui/src/**/*.{tsx,ts,js}';
 @source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
 
+@theme inline {
+  --font-sans:
+    var(--font-inter), Inter, Helvetica Neue, Helvetica, ui-sans-serif, system-ui, sans-serif;
+  --font-heading: var(--font-manrope, var(--font-sans));
+  --font-mono: 'Source Code Pro', ui-monospace, Menlo, monospace;
+}
+
+@theme {
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --text-lg: 1rem;
+  --text-xl: 1.125rem;
+  --text-2xl: 1.375rem;
+  --text-3xl: 1.75rem;
+  --text-4xl: 2.125rem;
+  --text-5xl: 2.875rem;
+  --text-6xl: 3.625rem;
+  --text-7xl: 4.375rem;
+  --text-8xl: 5.875rem;
+  --text-9xl: 7.875rem;
+  --font-weight-normal: 450;
+}
+
 @layer utilities {
   .prose--remove-p-margin p {
     margin: 0;
@@ -25,26 +48,28 @@
   ::file-selector-button {
     border-color: hsl(var(--border-default, currentColor));
   }
-}
 
-@font-face {
-  font-family: 'custom-font';
-  src:
-    url(../../../packages/common/assets/fonts/CustomFont-Book.woff2) format('woff2'),
-    url(../../../packages/common/assets/fonts/CustomFont-Book.woff) format('woff');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'custom-font';
-  src:
-    url(../../../packages/common/assets/fonts/CustomFont-Medium.woff2) format('woff2'),
-    url(../../../packages/common/assets/fonts/CustomFont-Medium.woff) format('woff');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
+  code,
+  .code-content,
+  pre,
+  kbd,
+  samp,
+  .font-mono {
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+    --text-5xl: 3rem;
+    --text-6xl: 3.75rem;
+    --text-7xl: 4.5rem;
+    --text-8xl: 6rem;
+    --text-9xl: 8rem;
+    --font-weight-normal: 400;
+  }
 }
 
 :root {
@@ -52,9 +77,17 @@
   --header-height: 50px;
 }
 
+html {
+  scroll-behavior: smooth;
+  font-weight: 500;
+}
+
+html[data-theme*='dark'] {
+  font-weight: 450;
+}
+
 body {
   @apply bg-background text-foreground;
-  scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -64,14 +97,19 @@ body {
   color: #333 !important;
 }
 
-/* a { */
-/*   text-decoration: none !important; */
-/* } */
-
-article h1 {
-  /* margin-bottom: 2rem !important; */
-  /* font-size: 3rem !important; */
-  /* font-weight: 400 !important; */
+h1:not(.font-mono),
+h2:not(.font-mono),
+h3:not(.font-mono),
+h4:not(.font-mono),
+h5:not(.font-mono),
+h6:not(.font-mono),
+.h1:not(.font-mono),
+.h2:not(.font-mono),
+.h3:not(.font-mono),
+.h4:not(.font-mono),
+.h5:not(.font-mono),
+.h6:not(.font-mono) {
+  @apply font-heading font-semibold;
 }
 
 .thin-scrollbar {
@@ -103,10 +141,36 @@ article h1 {
   @apply text-foreground-muted text-xs;
 }
 
-.prose :where(p):not(:where([class~='not-prose'] *)) {
+.prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
   white-space: pre-line;
 }
 
+.prose :where(p, a, code, pre):not(:where([class~='not-prose'], [class~='not-prose'] *)),
+.prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {
+  font-weight: inherit;
+}
+
+.prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  @apply font-heading font-semibold;
+}
+
+.prose
+  :where(p, li, a, figcaption):not(:where([class~='not-prose'], [class~='not-prose'] *)):not(
+    :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) *
+  ) {
+  @apply text-base leading-7;
+}
+
+.prose :where(h1, .h1):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  @apply text-4xl;
+}
+.prose :where(h2, .h2):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  @apply text-2xl;
+}
+.prose :where(h3, .h3):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  @apply text-xl leading-7;
+}
+
 code[class*='language-'],
 pre[class*='language-'] {
   text-shadow: none !important;
@@ -136,7 +200,7 @@ pre[class*='language-'] {
 }
 
 .method-list-title-isChild {
-  font-family: var(--custom-font-size-xs);
+  font-family: var(--font-mono);
   & h5 {
     font-weight: 200;
   }

apps/www/app/layout.tsx

@@ -3,8 +3,8 @@ import 'config/code-hike.css'
 import '../styles/globals.css'
 import '../pages/launch-week/launchWeek.css'
 
-import { Metadata } from 'next'
-import type { Viewport } from 'next'
+import { inter, manrope, sourceCodePro } from '~/lib/fonts'
+import type { Metadata, Viewport } from 'next'
 
 import Providers from './providers'
 import { APP_NAME, DEFAULT_META_DESCRIPTION } from '@/lib/constants'
@@ -46,7 +46,11 @@ export const viewport: Viewport = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${manrope.variable} ${inter.variable} ${sourceCodePro.variable}`}
+    >
       <body>
         <Providers>{children}</Providers>
       </body>

apps/www/components/Hero/Hero.tsx

@@ -14,7 +14,7 @@ const Hero = () => {
             <div className="mx-auto max-w-2xl lg:col-span-6 lg:flex lg:items-center justify-center text-center">
               <div className="relative z-10 lg:h-auto pt-[90px] lg:pt-[90px] lg:min-h-[300px] flex flex-col items-center justify-center sm:mx-auto md:w-3/4 lg:mx-0 lg:w-full gap-4 lg:gap-8">
                 <div className="flex flex-col items-center">
-                  <h1 className="text-foreground text-4xl sm:text-5xl sm:leading-none lg:text-7xl">
+                  <h1 className="text-foreground text-4xl sm:text-5xl sm:leading-none font-medium tracking-normal lg:text-7xl">
                     <span className="block text-foreground">Build in a weekend</span>
                     <span className="text-brand block md:ml-0">Scale to millions</span>
                   </h1>

apps/www/fonts/index.ts

@@ -0,0 +1,22 @@
+import { Inter, Manrope, Source_Code_Pro } from 'next/font/google'
+
+export const manrope = Manrope({
+  variable: '--font-manrope',
+  display: 'swap',
+  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  subsets: ['latin'],
+})
+
+export const inter = Inter({
+  variable: '--font-inter',
+  display: 'swap',
+  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  subsets: ['latin'],
+})
+
+export const sourceCodePro = Source_Code_Pro({
+  variable: '--font-source-code-pro',
+  display: 'swap',
+  fallback: ['Source Code Pro', 'Office Code Pro', 'Menlo', 'monospace'],
+  subsets: ['latin'],
+})

apps/www/lib/fonts.ts

@@ -0,0 +1 @@
+export { inter, manrope, sourceCodePro } from '~/fonts'

apps/www/pages/_app.tsx

@@ -3,6 +3,7 @@ import 'config/code-hike.css'
 import '../styles/globals.css'
 import './launch-week/launchWeek.css'
 
+import { inter, manrope, sourceCodePro } from '~/lib/fonts'
 import {
   AuthProvider,
   FeatureFlagProvider,
@@ -101,29 +102,31 @@ export default function App({ Component, pageProps }: AppProps) {
         }}
       />
 
-      <AuthProvider>
-        {/* [TODO] I think we need to deconflict with the providers in layout.tsx? */}
-        <FeatureFlagProvider API_URL={API_URL} enabled={{ cc: true, ph: false }}>
-          <DevToolbarProvider apiUrl={API_URL}>
-            <ThemeProvider forcedTheme={forceDarkMode ? 'dark' : undefined}>
-              <TooltipProvider delayDuration={0}>
-                <CommandProvider app="www" onTelemetry={onTelemetry}>
-                  <Toaster />
-                  <Component {...pageProps} />
-                  <WwwCommandMenu />
-                  <PageTelemetry
-                    API_URL={API_URL}
-                    hasAcceptedConsent={hasAcceptedConsent}
-                    enabled={IS_PLATFORM}
-                  />
-                  <DevToolbar />
-                </CommandProvider>
-              </TooltipProvider>
-            </ThemeProvider>
-          </DevToolbarProvider>
-        </FeatureFlagProvider>
-      </AuthProvider>
-      <TelemetryTagManager />
+      <div className={`${manrope.variable} ${inter.variable} ${sourceCodePro.variable}`}>
+        <AuthProvider>
+          {/* [TODO] I think we need to deconflict with the providers in layout.tsx? */}
+          <FeatureFlagProvider API_URL={API_URL} enabled={{ cc: true, ph: false }}>
+            <DevToolbarProvider apiUrl={API_URL}>
+              <ThemeProvider forcedTheme={forceDarkMode ? 'dark' : undefined}>
+                <TooltipProvider delayDuration={0}>
+                  <CommandProvider app="www" onTelemetry={onTelemetry}>
+                    <Toaster />
+                    <Component {...pageProps} />
+                    <WwwCommandMenu />
+                    <PageTelemetry
+                      API_URL={API_URL}
+                      hasAcceptedConsent={hasAcceptedConsent}
+                      enabled={IS_PLATFORM}
+                    />
+                    <DevToolbar />
+                  </CommandProvider>
+                </TooltipProvider>
+              </ThemeProvider>
+            </DevToolbarProvider>
+          </FeatureFlagProvider>
+        </AuthProvider>
+        <TelemetryTagManager />
+      </div>
     </>
   )
 }

apps/www/styles/globals.css

@@ -12,6 +12,13 @@
 @source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
 @source './../../../packages/marketing/src/**/*.{tsx,ts,js}';
 
+@theme inline {
+  --font-sans:
+    var(--font-inter), Inter, Helvetica Neue, Helvetica, ui-sans-serif, system-ui, sans-serif;
+  --font-heading: var(--font-manrope, var(--font-sans));
+  --font-mono: var(--font-source-code-pro), 'Source Code Pro', ui-monospace, Menlo, monospace;
+}
+
 @utility section-container {
   @apply w-full mx-auto max-w-7xl px-6 lg:px-12 xl:px-24;
 }
@@ -37,6 +44,21 @@
 
   --delay-1200: 1200ms;
   --delay-1500: 1500ms;
+
+  /* font sizing and weights optimized for Inter */
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --text-lg: 1rem;
+  --text-xl: 1.125rem;
+  --text-2xl: 1.375rem;
+  --text-3xl: 1.75rem;
+  --text-4xl: 2.125rem;
+  --text-5xl: 2.875rem;
+  --text-6xl: 3.625rem;
+  --text-7xl: 4.375rem;
+  --text-8xl: 5.875rem;
+  --text-9xl: 7.875rem;
+  --font-weight-normal: 450;
 }
 
 @keyframes flash-code {
@@ -115,6 +137,21 @@
   ::file-selector-button {
     border-color: hsl(var(--border-default, currentColor));
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    @apply font-heading font-semibold;
+  }
 }
 
 @layer utilities {
@@ -132,28 +169,9 @@
   }
 }
 
-@font-face {
-  font-family: 'custom-font';
-  src:
-    url(../../../packages/common/assets/fonts/CustomFont-Book.woff2) format('woff2'),
-    url(../../../packages/common/assets/fonts/CustomFont-Book.woff) format('woff');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'custom-font';
-  src:
-    url(../../../packages/common/assets/fonts/CustomFont-Medium.woff2) format('woff2'),
-    url(../../../packages/common/assets/fonts/CustomFont-Medium.woff) format('woff');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
 html {
   scroll-behavior: smooth !important;
+  font-weight: 450;
 }
 
 body {

apps/www/styles/realtime.module.css

@@ -104,7 +104,7 @@
   88.1%,
   100% {
     opacity: 1;
-    font-family: 'custom-font';
+    font-family: var(--font-sans);
     background-color: transparent;
   }
 }