Skip to main content

​
Quickstart

Get started with Fonttrio in under 2 minutes. This guide will walk you through installing your first font pairing and using it in your project.
This guide assumes you already have a Next.js 14+ project with shadcn/ui and Tailwind CSS installed. If not, see the Installation guide for setup instructions.

​
Install a Pairing

1

Choose a pairing

Browse available pairings at fonttrio.xyz or pick one from the categories below:
  • Editorial - Classic serif pairing for content-heavy sites
  • Minimal - Clean sans-serif for modern apps
  • Corporate - Professional pairing for business sites
  • Creative - Unique pairing for portfolios
For this example, we’ll use the Editorial pairing.
2

Run the install command

Install the pairing using the shadcn CLI:
npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
This command will:
  • Download the font configuration
  • Install the three fonts (heading, body, mono)
  • Set up CSS variables in your globals.css
  • Configure font loading in your Next.js app
3

Verify installation

Check that the following CSS variables were added to your app/globals.css:
:root {
  --font-heading: var(--font-playfair-display);
  --font-body: var(--font-source-serif-4);
  --font-mono: var(--font-jetbrains-mono);
}
The typography scale CSS should also be present:
h1 {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 700;
}

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

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

Use the fonts in your components

The fonts are now available throughout your project. You can use them in two ways:Option 1: Use HTML elements (automatic styling)
export default function Page() {
  return (
    <div>
      <h1>Beautiful Typography</h1>
      <p>This text automatically uses your installed font pairing.</p>
      <code>console.log('Monospace code')</code>
    </div>
  )
}
Option 2: Use CSS variables directly
export default function Page() {
  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)]">
        Custom Heading
      </h1>
      <p className="font-[family-name:var(--font-body)]">
        Custom body text with the selected font.
      </p>
      <code className="font-[family-name:var(--font-mono)]">
        Monospace code
      </code>
    </div>
  )
}
5

Preview your changes

Start your development server:
npm run dev
Visit your app and you’ll see the new typography in action!

​
Try Different Pairings

You can install multiple pairings and switch between them: 
npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json
npx shadcn@latest add https://www.fonttrio.xyz/r/corporate.json
To switch pairings, simply update the CSS variable values in your globals.css: 
:root {
  /* Change from Editorial to Minimal */
  --font-heading: var(--font-inter);
  --font-body: var(--font-inter);
  --font-mono: var(--font-jetbrains-mono);
}

​
Example Component

Here’s a complete example of a component using Fonttrio: 
export default function BlogPost() {
  return (
    <article className="max-w-2xl mx-auto px-4 py-12">
      <h1 className="text-4xl font-bold mb-4">
        Building Better Typography
      </h1>
      
      <p className="text-lg text-muted-foreground mb-8">
        A guide to using font pairings effectively
      </p>
      
      <div className="prose">
        <h2>Why Typography Matters</h2>
        <p>
          Good typography creates hierarchy, improves readability, 
          and establishes your brand's visual identity.
        </p>
        
        <h3>The Three Font Rule</h3>
        <p>
          Most designs work best with three fonts:
        </p>
        <ul>
          <li>One for headings</li>
          <li>One for body text</li>
          <li>One for code and UI elements</li>
        </ul>
        
        <pre>
          <code>console.log('Perfect typography');</code>
        </pre>
      </div>
    </article>
  )
}

​
What’s Next?

Browse All Pairings

Explore all 49 curated font pairings with live previews

Installation Guide

Detailed setup instructions and troubleshooting

Customization

Learn how to customize typography scales and font weights

Examples

See real-world examples of Fonttrio in production
Each pairing page on fonttrio.xyz includes an interactive type tester and context previews to help you make the right choice.

Build docs developers (and LLMs) love

Get started for freeTalk to us