Installing Font Pairings

Complete guide to installing Fonttrio font pairings in your shadcn/ui project using the CLI.

Fonttrio uses the shadcn/ui registry system to deliver font pairings directly to your project. Installation takes seconds and requires no manual configuration.

Prerequisites

Before installing a Fonttrio pairing, ensure your project has:

1. Next.js 14+ with App Router

   Fonttrio pairings use next/font/google for optimal font loading.

   npx create-next-app@latest my-app
   
2. shadcn/ui Installed

   The shadcn CLI must be configured in your project.

   npx shadcn@latest init
   
3. Tailwind CSS

   Tailwind should be configured as part of your Next.js or shadcn setup.

If you haven’t set up shadcn/ui yet, follow the official installation guide first.

Installation Command

Install any pairing using the shadcn CLI:

npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json

Replace editorial with any pairing name from the collection.

Package Manager Options

Fonttrio supports all major package managers:

npm

npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json

yarn dlx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json

pnpm dlx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json

bunx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json

What Gets Installed

When you install a pairing, the shadcn CLI automatically adds the following to your project:

1. Font Imports

Three font files are created in your project with next/font/google imports:

// Example: registry/fonts/playfair-display.tsx
import { Playfair_Display } from "next/font/google";

export const playfairDisplay = Playfair_Display({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700", "800"],
  variable: "--font-playfair-display",
});

// registry/fonts/source-serif-4.tsx
import { Source_Serif_4 } from "next/font/google";

export const sourceSerif4 = Source_Serif_4({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
  variable: "--font-source-serif-4",
});

// registry/fonts/jetbrains-mono.tsx
import { JetBrains_Mono } from "next/font/google";

export const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
  variable: "--font-jetbrains-mono",
});

2. Pairing Configuration

A pairing file that combines all three fonts:

// registry/pairings/editorial.tsx
import { playfairDisplay } from "@/registry/fonts/playfair-display";
import { sourceSerif4 } from "@/registry/fonts/source-serif-4";
import { jetbrainsMono } from "@/registry/fonts/jetbrains-mono";

export const editorial = {
  heading: playfairDisplay,
  body: sourceSerif4,
  mono: jetbrainsMono,
};

3. CSS Variables

The pairing adds CSS custom properties to your globals.css:

@layer base {
  :root {
    --font-heading: var(--font-playfair-display);
    --font-body: var(--font-source-serif-4);
    --font-mono: var(--font-jetbrains-mono);
  }
}

4. Typography Scale

CSS rules for all heading and body elements:

@layer base {
  h1 {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  h2 {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 600;
  }

  h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
    font-weight: 600;
  }

  h4, h5, h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
  }

  body, p {
    font-family: var(--font-body);
    line-height: 1.65;
  }

  code, pre {
    font-family: var(--font-mono);
  }
}

The typography scale is applied globally. If you have existing font styles, they will be overridden. See the customization guide to adjust the scale.

Applying Fonts to Your Layout

After installation, apply the fonts in your root layout:

app/layout.tsx

import { editorial } from "@/registry/pairings/editorial";
import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html 
      lang="en" 
      className={`
        ${editorial.heading.variable} 
        ${editorial.body.variable} 
        ${editorial.mono.variable}
      `}
    >
      <body>{children}</body>
    </html>
  );
}

This makes the font variables available throughout your entire application.

Using Fonts in Components

Once installed, use the CSS variables in your components:

With Tailwind Classes

<h1 className="font-[family-name:var(--font-heading)]">
  Your Heading
</h1>

<p className="font-[family-name:var(--font-body)]">
  Your body text
</p>

<code className="font-[family-name:var(--font-mono)]">
  const code = true;
</code>

With Inline Styles

<h1 style={{ fontFamily: "var(--font-heading)" }}>
  Your Heading
</h1>

With CSS Modules

styles.module.css

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

.body {
  font-family: var(--font-body);
}

Because the typography scale is applied globally via globals.css, all <h1> through <h6> and <p> elements automatically use the pairing fonts. You only need to explicitly set fonts for custom components.

Installation Options

The shadcn CLI provides several options for customizing the installation:

Overwrite Existing Files

If you’ve already installed a pairing and want to replace it:

npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json --overwrite

Silent Mode

Skip confirmation prompts:

npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json --yes

Custom Path

Install to a different directory:

npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json --path ./src

Available Pairings

Here are some popular pairings you can install:

Editorial

npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json

Playfair Display + Source Serif 4 + JetBrains Mono — Classic editorial pairing

Minimal

npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json

Inter + Inter + JetBrains Mono — Clean, modern, minimal

Corporate

npx shadcn@latest add https://www.fonttrio.xyz/r/corporate.json

Raleway + Open Sans + Roboto Mono — Professional and trustworthy

Impact

npx shadcn@latest add https://www.fonttrio.xyz/r/impact.json

Bebas Neue + Barlow + Fira Code — High-impact marketing

Protocol

npx shadcn@latest add https://www.fonttrio.xyz/r/protocol.json

Sora + Inter + JetBrains Mono — Modern fintech and SaaS

Visit fonttrio.xyz to browse all 49 available pairings with live previews.

Verifying Installation

After installation, verify everything is set up correctly:

1. Check Registry Files

   Confirm the font files exist in registry/fonts/ and the pairing exists in registry/pairings/.

2. Check globals.css

   Verify CSS variables and typography scale rules were added.

3. Update Layout

   Add the font variables to your root layout as shown above.

4. Test in Browser

   Run your dev server and inspect headings in the browser DevTools to confirm fonts are loading from Google Fonts.

Troubleshooting

Fonts Not Loading

If fonts aren’t appearing in your browser:

1. Check that font variables are added to the <html> element in your layout
2. Verify globals.css is imported in your root layout
3. Clear your browser cache and reload
4. Check the Network tab in DevTools to confirm Google Fonts are loading

CSS Variables Not Working

If var(--font-heading) isn’t resolving:

1. Ensure the font variables are applied to the <html> element, not <body>
2. Check that the variable names match exactly (case-sensitive)
3. Verify Tailwind is configured to recognize the arbitrary values

Existing Fonts Conflict

If you have existing font configurations:

1. Remove or comment out old font imports
2. Clear the old CSS variables from globals.css
3. Reinstall the Fonttrio pairing
4. Update your layout to use the new font variables

Next Steps

Customize Typography

Adjust font sizes, weights, and spacing to match your design.

Mix Multiple Pairings

Learn how to install and switch between multiple pairings.