Skip to main content

​
Introduction to Fonttrio

Three fonts. One command. Fonttrio is a curated collection of font pairings designed specifically for shadcn/ui projects. Each pairing includes a carefully selected combination of heading, body, and monospace fonts that work together harmoniously.

​
Why Fonttrio?

Building a typography system from scratch is time-consuming. Finding fonts that complement each other, establishing the right scale, and setting up CSS variables takes hours of work. Fonttrio solves this by providing ready-made, battle-tested font combinations that you can install in seconds.
Fonttrio uses the shadcn/ui registry system to distribute font pairings, making installation as simple as adding a component.

​
Key Features

49 Curated Pairings

From editorial to corporate, minimal to bold - carefully selected combinations for every project type.

Complete Typography Scale

Each pairing includes h1 through body sizing with optimized line heights and letter spacing.

CSS Variables

Ready-to-use CSS custom properties for easy theming throughout your project.

One Command Install

Add any pairing to your project instantly using the shadcn CLI.

Google Fonts Integration

All fonts loaded from Google Fonts CDN with optimal performance.

Dark Mode Ready

Works seamlessly with shadcn/ui’s theming system out of the box.

​
How It Works

Fonttrio leverages the shadcn/ui registry system to distribute font pairings. When you install a pairing:
  1. Fonts are configured in your Next.js app via next/font/google
  2. CSS variables are set up in your globals.css file
  3. Typography scale is applied through CSS custom properties
  4. All components can use the font variables immediately
Each pairing is structured as a registry item that includes: 
{
  "name": "pairing-editorial",
  "type": "registry:style",
  "registryDependencies": [
    "https://www.fonttrio.xyz/r/playfair-display.json",
    "https://www.fonttrio.xyz/r/source-serif-4.json",
    "https://www.fonttrio.xyz/r/jetbrains-mono.json"
  ],
  "cssVars": {
    "theme": {
      "--font-heading": "var(--font-playfair-display)",
      "--font-body": "var(--font-source-serif-4)",
      "--font-mono": "var(--font-jetbrains-mono)"
    }
  }
}

​
Pairing Categories

Fonttrio offers pairings organized by style and use case:

​
Editorial

Sophisticated combinations for content-heavy sites
  • Editorial — Playfair Display + Source Serif 4 + JetBrains Mono
  • Literary — Crimson Text + Source Serif 4 + IBM Plex Mono
  • Newspaper — Merriweather + Merriweather + Cousine

​
Clean

Minimal, modern combinations
  • Minimal — Inter + Inter + JetBrains Mono
  • Swiss — Work Sans + Work Sans + Source Code Pro
  • Modern Clean — Space Grotesk + Space Grotesk + Space Mono

​
Bold

High-impact combinations for marketing
  • Impact — Bebas Neue + Barlow + Fira Code
  • Poster — Alfa Slab One + Assistant + Roboto Mono
  • Headline — Anton + Heebo + Fira Code

​
Corporate

Professional combinations for business
  • Corporate — Raleway + Open Sans + Roboto Mono
  • Protocol — Sora + Inter + JetBrains Mono
  • Fintech — Plus Jakarta Sans + Inter + Source Code Pro

​
Creative

Unique combinations for portfolios and creative work
  • Creative — Syne + Manrope + Fira Code
  • Studio — Space Grotesk + DM Sans + Fira Code
  • Agency — Schibsted Grotesk + Karla + Fira Code
Visit fonttrio.xyz to browse all 49 pairings with live previews and interactive type testers.

​
What’s Included

Each pairing provides:
  • Three Google Fonts (heading, body, monospace)
  • Typography scale with h1-h6 and body styles
  • CSS variables for font families
  • Optimized font loading via next/font
  • Metadata including mood tags and use cases

​
Get Started

Ready to add beautiful typography to your project? Continue to the Quickstart guide to install your first pairing, or see the detailed Installation instructions.

Quickstart Guide

Install a font pairing and see it in action in under 2 minutes.

Build docs developers (and LLMs) love

Get started for freeTalk to us