How to Install and Use Fonttrio Font Pairings in Your shadcn/ui Project

Introduction

If you’re building a web application with shadcn/ui and want to give it a polished, professional typography system without spending hours fine-tuning font combinations, Fonttrio is the tool you need. Created by Dima Kapish, this open-source font pairing registry offers 49 curated font combinations that you can install with a single command. Fonttrio integrates directly with the shadcn CLI, automatically generating the required CSS variables and typography scales. In this step-by-step guide, you’ll learn how to set up Fonttrio in your shadcn/ui project, choose the perfect pairing, and let the tool handle the rest.

What You Need

Before you start, make sure you have the following:

• Node.js (version 16 or later) installed on your machine.
• npm or yarn package manager.
• An existing shadcn/ui project already set up (including the shadcn CLI installed globally or as a dev dependency).
• Basic familiarity with the terminal and CSS custom properties.

Step-by-Step Guide

Step 1: Verify Your shadcn/ui Project

Open your project folder in the terminal. Run npx shadcn-ui@latest init if you haven’t initialized shadcn/ui yet. If your project is already initialized, you should see a components.json file at the root. Fonttrio relies on the shadcn CLI configuration to properly install font assets and generate variables.

Step 2: Install Fonttrio

Fonttrio is available via npm and integrates directly with the shadcn CLI. Run the following command in your terminal:

npx fonttrio@latest install

This command will fetch the Fonttrio registry and add it as a dependency. You’ll see a success message once the installation is complete.

Step 3: Browse Available Font Pairings

Before choosing a pairing, you can list all 49 combinations. Use the command:

npx fonttrio@latest list

You’ll see a table of pairings, each with a unique slug (e.g., inter-plus-roboto-mono), and a short description. Pairings consist of a primary font for headings and a secondary font for body text. Write down the slug of the pairing you like.

Step 4: Install a Specific Font Pairing

Now add your chosen pairing to the project. Replace pairing-slug with the actual slug from the list:

npx fonttrio@latest add pairing-slug

Example:

npx fonttrio@latest add inter-plus-roboto-mono

This command does three things at once:

• Downloads the required font files (or links to Google Fonts/CDN).
• Generates CSS variables for the pairing (e.g., --font-heading, --font-body).
• Creates a typography scale (font sizes, line heights, letter spacing) that matches the pairing.

All generated code is placed inside a file like styles/fonts.css or appended to your global CSS, depending on your shadcn/ui setup.

Step 5: Apply the Typography in Your Components

Once the CSS variables are in place, you can use them throughout your app. For example, in your globals.css file or a layout component, set the body and heading fonts:

body {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

If you’re using Tailwind CSS (common with shadcn/ui), you can extend the theme in tailwind.config.js to use the same variables:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        heading: ['var(--font-heading)'],
        body: ['var(--font-body)'],
      },
    },
  },
}

This ensures all shadcn/ui components automatically inherit the correct fonts.

Step 6: Review and Customize

Fonttrio generates a sensible typography scale, but you can override any variable. Open the generated CSS file and adjust values like --font-size-base, --line-height-base, etc., to match your design system. Remember that these changes only affect your project – the original pairing remains untouched in the registry.

Step 7: Update or Remove a Pairing

To switch to a different pairing later, simply run the add command with the new slug. Fonttrio will overwrite the previous CSS variables and typography scale. If you want to completely remove a pairing, run:

npx fonttrio@latest remove pairing-slug

This deletes the associated files and reverts to default shadcn/ui fonts.

Tips for Best Results

• Test multiple pairings: Don’t settle on the first one you see. Fonttrio’s command line makes it easy to try out different combinations quickly – just run add with a new slug.
• Check accessibility: Ensure adequate contrast between your primary and secondary fonts. Some pairings are designed to work together, but you should verify readability, especially at small sizes.
• Keep it up to date: Fonttrio is actively maintained. Run npx fonttrio@latest upgrade periodically to get new pairings and improvements.
• Use the generated scale: The typography scale covers everything from captions to headings. Stick to the predefined ratios for a consistent rhythm across your UI.
• Combine with design tokens: If you use other design tokens (colors, spacing), integrate the font variables into your token system to maintain a single source of truth.
• Backup your overrides: If you customize the generated CSS, keep a copy in version control. Running add again will overwrite your changes.

Fonttrio takes the guesswork out of font pairing for shadcn/ui projects. With a single command, you unlock a curated collection of typography systems that are visually harmonious and technically optimized. Give it a try and see how much faster you can iterate on your app’s typography.