Typography

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:

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.