Quickstart

Install a Fonttrio pairing and see it in action in under 2 minutes.

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:

   npm

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

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

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

   bunx 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.