How to Use Fonttrio to Add Curated Font Pairings to Your shadcn/ui Project

By ✦ min read

What You Need Before You Start

This guide walks you through installing and using Fonttrio – an open-source font pairing registry built specifically for shadcn/ui projects. Created by Dima Kapish, Fonttrio provides 49 hand-picked font combinations that you can install with a single command. It integrates directly with the shadcn CLI, automatically generating CSS variables and a complete typography scale for your web application.

Source: www.infoq.com

Before you begin, make sure you have the following:

Node.js (version 16 or later) installed on your machine.
A shadcn/ui project already set up. If you don’t have one, follow the official shadcn/ui installation guide first.
A terminal or command-line interface ready.
Basic familiarity with CSS and Tailwind CSS (since shadcn/ui uses Tailwind).

Step‑by‑Step Guide

Step 1: Open Your Project’s Root Directory

Navigate to the folder that contains your shadcn/ui project. This is usually the same directory where your package.json file lives. Use your terminal to cd into it:

cd /path/to/your/shadcn-project

Step 2: Browse Available Font Pairings

Fonttrio lists 49 curated font combinations. To see what’s available, visit the official Fonttrio registry page or use the CLI’s built‑in preview. Each pairing includes a headline font and a body font, along with a preview image. Choose the combination that best fits your project’s tone – for example, a modern sans‑serif pair for a clean UI or a serif/script mix for a more editorial look.

Step 3: Install a Font Pairing via the shadcn CLI

Once you’ve picked a pairing, note its name (e.g., inter-plus-roboto). Run the following single command in your terminal, replacing pairing-name with your chosen name:

npx shadcn@latest add font-pairing-name

For example, to install the popular inter-plus-roboto pairing:

npx shadcn@latest add inter-plus-roboto

The CLI will download the pairing, generate the necessary CSS variables (like --font-heading and --font-body), and create a typography scale inside your project’s CSS file (usually globals.css or a Tailwind configuration file).

Step 4: Verify the Installation

Open your project in a code editor. Look for the newly added CSS variables. They should appear in your global stylesheet or in a @layer base block. For instance:

:root {
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  /* ... more scale values */
}

If you’re using Tailwind, the variables are automatically referenced in the fontFamily and fontSize theme extensions.

Step 5: Apply the Fonts to Your shadcn/ui Components

By default, shadcn/ui components use the CSS variables defined by Fonttrio. You don’t need to change anything. Test a page by rendering a few components – buttons, cards, headings – and confirm that the fonts are applied. If you want to override a specific component, you can reference the variables directly in your own styles:

How to Use Fonttrio to Add Curated Font Pairings to Your shadcn/ui Project — Source: www.infoq.com

h1 {
  font-family: var(--font-heading);
}

Step 6: Customize the Typography Scale (Optional)

Fonttrio provides a sensible default scale (from xs up to 7xl). You can tweak these values in your global CSS. For example, to make headings slightly larger, update the --font-size-4xl variable. The scale is fully customizable without breaking the font pairing logic.

Step 7: Manage Multiple Pairings (Advanced)

If you want to test different pairings without committing, Fonttrio allows you to install them side‑by‑side. Use the same add command with a different pairing name. The CLI will add new CSS variables but keep the old ones (namespaced by pairing ID). You can then switch between pairings by commenting out or toggling CSS lines, or by using a custom selector.

Tips for the Best Experience

Test on multiple devices: Font pairings that look great on a desktop may not scale well on mobile. Because Fonttrio generates a responsive typography scale, check your app on different screen sizes.
Check readability: A stylish pairing can hinder legibility. Use tools like the WebAIM contrast checker to ensure your text meets accessibility standards.
Limit to one pairing per project: While Fonttrio supports multiple installations, using more than one font pairing can slow down page load and overwhelm users. Stick to one cohesive style.
Update regularly: Fonttrio is open source and new pairings may be added. Run npx shadcn@latest update to get the latest list.
Contribute your own pairing: If you’ve created a combination that others might find useful, submit it to the Fonttrio registry on GitHub. It’s a great way to give back to the community.

With Fonttrio, adding professional font pairings to your shadcn/ui project becomes a trivial task. The 49 curated combinations, one‑line installation, and automatic CSS generation save you hours of manual setup. Try it today and give your web app a polished, consistent typographic voice.

Tags: