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

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.

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.

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.