Skip to main content
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: 
npx 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.

Build docs developers (and LLMs) love

Get started for freeTalk to us