From acbb19a69a5c2650aa776b89c51314767cf85379 Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Wed, 1 Jul 2026 12:59:00 +0200 Subject: [PATCH] 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 | 4 +- .../Navigation/NavigationMenu/TopNavBar.tsx | 1 + .../docs/components/StepHikeCompact/index.tsx | 2 +- .../docs/features/docs/GuidesMdx.template.tsx | 4 +- apps/docs/features/ui/guide/GuideHeader.tsx | 5 +- apps/docs/fonts/index.ts | 15 +++ apps/docs/styles/globals.css | 124 +++++++++++++----- apps/www/app/layout.tsx | 10 +- apps/www/components/Hero/Hero.tsx | 2 +- apps/www/fonts/index.ts | 22 ++++ apps/www/lib/fonts.ts | 1 + apps/www/pages/_app.tsx | 49 +++---- apps/www/styles/globals.css | 58 +++++--- apps/www/styles/realtime.module.css | 2 +- 14 files changed, 215 insertions(+), 84 deletions(-) create mode 100644 apps/docs/fonts/index.ts create mode 100644 apps/www/fonts/index.ts create mode 100644 apps/www/lib/fonts.ts diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index aea0eb429ee..c027bf23cfe 100644 --- a/apps/docs/app/layout.tsx +++ b/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 ( - + diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx index 476e64d5a32..4ac0c6866e7 100644 --- a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx @@ -48,6 +48,7 @@ const TopNavBar: FC = () => {
Search diff --git a/apps/docs/components/StepHikeCompact/index.tsx b/apps/docs/components/StepHikeCompact/index.tsx index a20e5f8d4bb..11491e5ab0b 100644 --- a/apps/docs/components/StepHikeCompact/index.tsx +++ b/apps/docs/components/StepHikeCompact/index.tsx @@ -80,7 +80,7 @@ const Step: FC> = ({ children, title, step }) => { const Details: FC> = ({ children, title, fullWidth = false }) => { return (
-

{title}

+

{title}

{children}
) diff --git a/apps/docs/features/docs/GuidesMdx.template.tsx b/apps/docs/features/docs/GuidesMdx.template.tsx index c3d5a5e2c3c..d46e6636c10 100644 --- a/apps/docs/features/docs/GuidesMdx.template.tsx +++ b/apps/docs/features/docs/GuidesMdx.template.tsx @@ -101,9 +101,9 @@ const GuideTemplate = ({ {meta?.title || 'Supabase Docs'} {meta?.subtitle && ( -

+
{meta.subtitle} -

+
)}
diff --git a/apps/docs/features/ui/guide/GuideHeader.tsx b/apps/docs/features/ui/guide/GuideHeader.tsx index 034adb0eed0..be7e79b1434 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 { @@ -16,9 +17,9 @@ export function GuideHeader({ className }: GuideHeaderProps) { {meta?.title || 'Supabase Docs'} {meta?.subtitle && ( -

+
{meta.subtitle} -

+ )}
diff --git a/apps/docs/fonts/index.ts b/apps/docs/fonts/index.ts new file mode 100644 index 00000000000..77c27d95a13 --- /dev/null +++ b/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'], +}) diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css index 47b3026db95..e2207f0fa35 100644 --- a/apps/docs/styles/globals.css +++ b/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; } diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx index 3ca0f453d36..a427e97929c 100644 --- a/apps/www/app/layout.tsx +++ b/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 ( - + {children} diff --git a/apps/www/components/Hero/Hero.tsx b/apps/www/components/Hero/Hero.tsx index cde263e913f..d6cbf644f1f 100644 --- a/apps/www/components/Hero/Hero.tsx +++ b/apps/www/components/Hero/Hero.tsx @@ -14,7 +14,7 @@ const Hero = () => {
-

+

Build in a weekend Scale to millions

diff --git a/apps/www/fonts/index.ts b/apps/www/fonts/index.ts new file mode 100644 index 00000000000..0d6f155e30a --- /dev/null +++ b/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'], +}) diff --git a/apps/www/lib/fonts.ts b/apps/www/lib/fonts.ts new file mode 100644 index 00000000000..5e75a726c09 --- /dev/null +++ b/apps/www/lib/fonts.ts @@ -0,0 +1 @@ +export { inter, manrope, sourceCodePro } from '~/fonts' diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx index bb274f0ddb0..6c31fa3419d 100644 --- a/apps/www/pages/_app.tsx +++ b/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) { }} /> - - {/* [TODO] I think we need to deconflict with the providers in layout.tsx? */} - - - - - - - - - - - - - - - - - +
+ + {/* [TODO] I think we need to deconflict with the providers in layout.tsx? */} + + + + + + + + + + + + + + + + + +
) } diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css index b5a771a962d..ba5b4e9125f 100644 --- a/apps/www/styles/globals.css +++ b/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 { diff --git a/apps/www/styles/realtime.module.css b/apps/www/styles/realtime.module.css index a58d8edb4ea..7ec78abf4a9 100644 --- a/apps/www/styles/realtime.module.css +++ b/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; } }