glasscn
Guides

Fonts & type

Fonts the shadcn way, a modular type scale, and type presets that restyle every heading, figure and paragraph at once.

Two kinds of font

App fonts
shadcn’s --font-sans, --font-heading, --font-mono, set by registry:font items. The CLI wires next/font in Next.js and fontsource elsewhere. Glass components use them automatically.
Theme fonts
Optional --glass-font-sans | heading | display | mono overrides — for a ThemeScope, a section, the studio. Unset, they fall back to your app fonts; set, you load them (loadFonts does it for Google fonts).

Install fonts

One item per role. Body fonts set --font-sans, heading fonts --font-heading, mono fonts --font-mono:

pnpm dlx shadcn@latest add https://glasscn.app/r/font-inter.json https://glasscn.app/r/font-heading-fraunces.json https://glasscn.app/r/font-mono-jetbrains-mono.json
System UIsans
Small gains, every night 0123456789
System — nothing to load. Use it as a theme font.
System Roundedrounded
Small gains, every night 0123456789
System — nothing to load. Use it as a theme font.
System Serifserif
Small gains, every night 0123456789
System — nothing to load. Use it as a theme font.
System Monomono
Small gains, every night 0123456789
System — nothing to load. Use it as a theme font.
Geistsans
Small gains, every night 0123456789
font-geistfont-heading-geist
Intersans
Small gains, every night 0123456789
font-interfont-heading-inter
Figtreesans
Small gains, every night 0123456789
font-figtreefont-heading-figtree
Manropesans
Small gains, every night 0123456789
font-manropefont-heading-manrope
DM Sanssans
Small gains, every night 0123456789
font-dm-sansfont-heading-dm-sans
Plus Jakarta Sanssans
Small gains, every night 0123456789
font-plus-jakarta-sansfont-heading-plus-jakarta-sans
Outfitsans
Small gains, every night 0123456789
font-outfitfont-heading-outfit
Sorasans
Small gains, every night 0123456789
font-sorafont-heading-sora
Onestsans
Small gains, every night 0123456789
font-onestfont-heading-onest
IBM Plex Sanssans
Small gains, every night 0123456789
font-ibm-plex-sansfont-heading-ibm-plex-sans
Nunitorounded
Small gains, every night 0123456789
font-nunitofont-heading-nunito
Space Groteskdisplay
Small gains, every night 0123456789
font-heading-space-groteskfont-space-grotesk
Bricolage Grotesquedisplay
Small gains, every night 0123456789
font-heading-bricolage-grotesquefont-bricolage-grotesque
Frauncesserif
Small gains, every night 0123456789
font-heading-frauncesfont-fraunces
Instrument Serifserif
Small gains, every night 0123456789
font-heading-instrument-seriffont-instrument-serif
Newsreaderserif
Small gains, every night 0123456789
font-heading-newsreaderfont-newsreader
Playfair Displayserif
Small gains, every night 0123456789
font-heading-playfair-displayfont-playfair-display
Loraserif
Small gains, every night 0123456789
font-heading-lorafont-lora
Source Serif 4serif
Small gains, every night 0123456789
font-heading-source-serif-4font-source-serif-4
IBM Plex Serifserif
Small gains, every night 0123456789
font-heading-ibm-plex-seriffont-ibm-plex-serif
Geist Monomono
Small gains, every night 0123456789
font-mono-geist-mono
JetBrains Monomono
Small gains, every night 0123456789
font-mono-jetbrains-mono
IBM Plex Monomono
Small gains, every night 0123456789
font-mono-ibm-plex-mono
DM Monomono
Small gains, every night 0123456789
font-mono-dm-mono
Space Monomono
Small gains, every night 0123456789
font-mono-space-mono

Type presets

A type preset sets the scale, leading, weights, tracking, case and numerals — and installs its fonts. type-system is the Apple look: San Francisco with SF Rounded figures, nothing to load.

pnpm dlx shadcn@latest add https://glasscn.app/r/type-editorial.json
type-default

Default: small gains, every night.

Your app's fonts on a major-third scale.

1,826
type-system

System: small gains, every night.

San Francisco everywhere, SF Rounded for figures — native and instant, nothing to load.

1,826
type-modern

Modern: small gains, every night.

Geist and Geist Mono, tight and precise.

1,826
type-editorial

Editorial: small gains, every night.

Instrument Serif headlines over Inter, generous leading — for reading.

1,826
type-friendly

Friendly: small gains, every night.

Rounded Nunito throughout, heavy titles.

1,826
type-technical

Technical: small gains, every night.

IBM Plex Sans, Space Grotesk caps titles, JetBrains Mono figures.

1,826
type-classic

Classic: small gains, every night.

Playfair Display over Newsreader — a book page.

1,826
type-grotesk

Grotesk: small gains, every night.

Bricolage Grotesque headlines, DM Sans body — loud and confident.

1,826

The scale

Every size is a step: 1rem × --glass-text-scale × --glass-type-ratio^n, as Tailwind utilities type-step-n2 … type-step-6. Change the ratio and every heading moves together. Defaults (major third, 1.25):

type-step-661.04pxSmall gains
type-step-548.83pxSmall gains
type-step-439.06pxSmall gains
type-step-331.25pxSmall gains
type-step-225pxSmall gains
type-step-120pxSmall gains
type-step-016pxSmall gains
type-step-n112.8pxSmall gains
type-step-n210.24pxSmall gains

Utilities

classes
<body className="type-glass">              {/* body font, leading, tracking, weight, features */}
<h2 className="type-glass-heading type-step-3">  {/* heading face at step 3 of the scale */}
<span className="type-glass-display type-step-6">1,826</span>
<code className="font-glass-mono">carryId</code>

type-glass (body), type-glass-heading, type-glass-display, font-glass-sans | heading | display | mono, numeric-glass, type-step-*, and glass-prose (the Prose component) for rich text. All read the Fonts and Type tokens.

At runtime

theme fonts
import { ThemeScope } from "@/components/glass/theme-scope"

// a type preset, its fonts loaded for you
<ThemeScope type="editorial" loadFonts>…</ThemeScope>

// or pick fonts by catalogue key (or any CSS stack)
<ThemeScope fonts={{ heading: "fraunces", sans: "inter", mono: "jetbrains-mono" }} loadFonts>…</ThemeScope>

// or straight on an element — load the font yourself
<section className="[--glass-font-heading:Fraunces,serif] [--glass-type-ratio:1.414]">…</section>