Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Fonts

Gaudi never downloads fonts; load them with next/font or @fontsource and put them first in the stack.

Theme font stacks name an open-source family first and fall back to system faces. @fontsource/<family> registers the real family name, so the stack picks it up automatically.

next/font generates its own family name: expose it as a CSS variable and put it first in the theme's stack, as the default theme does with --font-space-inter.

app/layout.jsx
jsx
import { Fraunces, Source_Sans_3 } from 'next/font/google';
const serif = Fraunces({ subsets: ['latin'], variable: '--font-fraunces' });const sans = Source_Sans_3({ subsets: ['latin'], variable: '--font-source-sans' });
// <html lang='en' className={`${serif.variable} ${sans.variable}`} suppressHydrationWarning>
app/globals.css
css
/* after the Gaudi stylesheets */[data-theme='folio'] {  --ds-font-sans: var(--font-source-sans), ui-sans-serif, system-ui, sans-serif;  --ds-font-heading: var(--font-fraunces), ui-serif, Georgia, serif;}

Curated pairs are exported as FONT_PAIRS from @gaudi/design-system/themes. See Typography for the default stacks.