# Typography

> Set the body, heading and mono fonts of your shadcn/ui design system from Google Fonts, a font URL or an uploaded file, and see how each font ships.

Canonical: https://www.shadcndesign.com/docs/ds-manager-typography

The Typography page sets three font slots and the letter spacing of your system. A slot can take any Google Fonts family, a font you host, or a file you upload.

## Font slots

| Slot | Used for | Exported as |
| --- | --- | --- |
| **Body** | Everything that is not a heading or code | `--font-sans` |
| **Heading** | Headings and display type | `--font-heading` |
| **Mono** | Code, token values, tabular data | `--font-mono` |

Each slot's dropdown shows the current family in its own typeface. Clicking it opens the font picker for that slot, with three tabs: **Google fonts**, **Upload** and **Add from URL**.

## Pick a Google font

1. Open **Typography** in the left nav.
2. Click the **Body**, **Heading** or **Mono** dropdown. The picker opens, titled with the slot, like **Body font**.
3. On **Google fonts**, type in **Search fonts** or narrow the list with the category menu: **All**, **Sans-serif**, **Serif** or **Mono**.
4. Click a family. It applies right away and the dialog stays open, so you can judge it on the canvas behind and click another.
5. Close the dialog when it looks right. Each click is one undo step.

<RichImage
  src="/docs/ds-manager/typography-font-picker.webp"
  alt="The DS Manager font picker for the Heading slot on the Google fonts tab, with a search for Fra and Fraunces checked in the results"
  width="456"
  height="592"
  quality="90"
/>

Every row draws its name in its own face. The list starts with **Featured** families, then **Popular on Google Fonts**, then the rest of the directory by category. The directory holds 1,836 families.

The Heading slot has one extra row at the top: **Same as body**. With it, headings use the body font and `--font-heading` points at `--font-sans`.

## Add a font by URL

Use **Add from URL** for a font you or a provider host.

1. Under **Source**, choose **Font file** or **Stylesheet**.
2. Paste the address into **Font file URL** or **Stylesheet URL**.
3. Fill in **Family name**. For a font file it is optional and defaults to the file name. For a stylesheet it is required: the stylesheet declares its own families, so name the one to render.
4. Click **Add font**.

DS Manager loads the URL before it applies it. Two things make that fail:

- A font file on a server that does not send an `Access-Control-Allow-Origin` header. Without it, no other site can use the file.
- A stylesheet URL that points at a web page. Use the `.css` file the provider gives you.

## Upload a font file

1. On the **Upload** tab, click **Choose file**.
2. Pick a `woff2`, `ttf` or `otf` file of up to 200 KB per face. A latin-subset woff2 is usually well under it.
3. Check **Family name**. DS Manager guesses it from the file name.
4. Click **Upload font file**.

The font applies to the slot and joins the **Uploaded fonts** list, so you can use it in another slot without uploading it again. The trash button next to a font removes it.

One file covers every weight in the slot. With a static font, the browser fakes bold from that one file, so a variable font gives you real weights.

## How fonts ship with the registry

When you publish, each kind of font takes a different route into the project that installs your system:

- **Google fonts** publish as a font item in your registry. In a Next.js project the shadcn CLI turns it into a `next/font/google` import, so the font is self-hosted and preloaded rather than linked from Google. It requests the latin subset when the family has one.
- **A hosted font file** becomes an `@font-face` rule in `globals.css` that points at your URL.
- **A hosted stylesheet** becomes an `@import` of that stylesheet in `globals.css`.
- **An uploaded file** becomes an `@font-face` rule whose `src` is a placeholder path, `./fonts/<family>.<format>`, with a comment that tells the installer to put their licensed file there.

<Callout type="warning">
DS Manager does not distribute uploaded font files. Your registry publishes the `@font-face` rule only. After installing, copy your licensed font file to the path in the rule. When someone forks a shared system, uploaded font files are not copied either; Google and URL fonts carry over.
</Callout>

## Letter spacing

The **Letter spacing** panel sets **Tracking**, the `--tracking-normal` seed, from -0.1em to 0.2em. Negative values tighten. Most brand type sits between -0.02em and 0.01em. DS Manager applies it to the body on the canvas and in the exported `globals.css`.

The **Fine tune** panel lists the derived steps: `tighter`, `tight`, `normal`, `wide`, `wider` and `widest`. Each follows the seed until you edit it. A dot beside a value marks your edit; click it to follow the seed again. To clear the seed, click its dot or run **Reset letter spacing** from the command menu.

The `--tracking-*` scale only appears in `globals.css` once you change the seed or a step.