> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zopio.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Custom fonts and how to use them

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:

```ts packages/design-system/lib/fonts.ts theme={"system"}
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](https://nextjs.org/docs/app/building-your-application/optimizing/fonts).