Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.jtbdos.com/llms.txt

Use this file to discover all available pages before exploring further.

The design system package contains a pre-configured fonts file, which has been wired up to all the apps. This fonts.ts file imports the default font Geist from Google Fonts, configures the appropriate subset and CSS variable name, then exports a className you can use in your app. This CSS variable is then applied to the shared Tailwind configuration. By default, fonts.ts exports a sans and mono font, but you can configure this to export as many as you need e.g. heading, body, secondary, etc. You can also replace fonts entirely simply by replacing the font name, like so:
packages/design-system/lib/fonts.ts
import { Acme } from 'next/font/google';

const sans = Acme({ subsets: ['latin'], variable: '--font-sans' });
You can also load fonts locally. Read more about this on the Next.js docs.