Skip to main content
Fonttrio Hero

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 49+ ready-made, battle-tested font combinations that you can install in seconds.

Quick Start

Install your first font pairing in under 30 seconds

Browse Collections

Explore curated pairings from editorial to bold

Installation Guide

Learn how to install and configure pairings

API Reference

Integrate the registry into your own tools

Key Features

49+ Curated Pairings

From editorial to corporate, minimal to bold — professionally selected combinations

One Command Install

Install any pairing instantly via shadcn CLI

Complete Typography Scale

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

CSS Variables

Ready-to-use CSS custom properties for easy theming

Google Fonts Integration

All fonts loaded from Google Fonts CDN

Dark Mode Ready

Works seamlessly with shadcn/ui’s theming system

Installation Preview

Install any pairing with a single command:
npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
The pairing automatically sets up:
  • Font configuration via next/font
  • CSS variables in your globals.css
  • Typography scale through CSS
  • All components can use the font variables immediately

View All Pairings

Visit the live preview site to test fonts with your own text

Build docs developers (and LLMs) love