Frequently Asked Questions

Find answers to common questions about Fonttrio. If you don’t see your question here, feel free to open an issue on GitHub.

Installation

What are the requirements to use Fonttrio?

Fonttrio requires:

Next.js 14+ with App Router
shadcn/ui installed in your project
Tailwind CSS configured

The font pairings use the shadcn/ui registry system and integrate with Next.js’s next/font for optimal performance.

How do I install a font pairing?

Use the shadcn CLI to install any pairing:

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

Replace editorial with any pairing name from the collection. You can find the install command on each pairing’s page at fonttrio.xyz.

Can I use Fonttrio without shadcn/ui?

Fonttrio is specifically designed for the shadcn/ui registry system. While the font configurations could technically be adapted for other setups, it would require manual configuration of:

Font loading via next/font/google
CSS variables setup
Typography scale implementation

The easiest path is to use shadcn/ui as intended.

Does Fonttrio work with the Pages Router?

Fonttrio is optimized for Next.js App Router (Next.js 13+). While it might work with Pages Router, it hasn’t been tested and may require modifications to font loading and CSS variable setup.

What happens when I install a pairing?

When you install a pairing, the shadcn CLI:

Downloads the pairing configuration
Installs the three fonts (heading, body, mono) via next/font/google
Sets up CSS variables in your globals.css
Applies the typography scale
Makes the fonts available to all components

Customization

Can I customize the font sizes or scale?

Yes! After installing a pairing, you can customize the typography scale by editing the CSS in your globals.css file. Each pairing includes sensible defaults for:

Heading sizes (h1 through h6)
Body text line height
Letter spacing
Font weights

You can override any of these values to match your design needs.

Can I mix fonts from different pairings?

Absolutely! You can install multiple pairings and then customize the CSS variables to mix and match:

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

Then in your globals.css, you can combine fonts:

:root {
  --font-heading: var(--font-playfair-display); /* from Editorial */
  --font-body: var(--font-inter);               /* from Minimal */
  --font-mono: var(--font-jetbrains-mono);      /* from Editorial */
}

How do I use the fonts in my components?

After installation, use the CSS variables in your 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)]">
  Your code
</code>

Or apply them globally in your CSS:

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

Can I use only one or two fonts from a pairing?

Yes! If you only want the heading and body fonts (without the monospace), you can:

Install the full pairing
Remove the mono font imports from your code
Delete the --font-mono CSS variable

Or manually configure just the fonts you want by referencing the individual font JSONs in the registry.

Do the pairings work with dark mode?

Yes! All Fonttrio pairings are designed to work seamlessly with shadcn/ui’s dark mode. The fonts maintain good readability in both light and dark themes.

Fonts & Compatibility

Where do the fonts come from?

All fonts in Fonttrio are loaded from Google Fonts using Next.js’s next/font/google integration. This provides:

Automatic font optimization
Self-hosting for privacy and performance
Zero layout shift
Reduced bundle size

Will the fonts slow down my site?

No! Next.js optimizes font loading by:

Self-hosting fonts at build time
Preloading font files
Removing external network requests
Using font display swap for instant text rendering

The fonts are part of your build and load efficiently.

How many pairings are available?

Fonttrio currently includes 49 curated font pairings across five categories:

Editorial — Sophisticated combinations for content-heavy sites
Clean — Minimal, modern combinations
Bold — High-impact combinations for marketing
Corporate — Professional combinations for business
Creative — Unique combinations for portfolios and creative work

New pairings are added regularly based on community suggestions.

Can I suggest a new font pairing?

Yes! We welcome font pairing suggestions. See the Contributing Guide for details on how to submit a pairing suggestion.

Are all Google Fonts available?

Currently, Fonttrio includes a curated selection of high-quality fonts from Google Fonts. Not every Google Font is available, as we focus on fonts that:

Have excellent readability
Work well in UI contexts
Pair harmoniously with other fonts
Support multiple weights and styles

Can I use custom fonts not from Google Fonts?

While Fonttrio is designed for Google Fonts, you can manually add custom fonts to your Next.js project using next/font/local and then reference them in the CSS variables. However, this falls outside Fonttrio’s automated setup.

Usage & Pricing

Is Fonttrio free to use?

Yes! Fonttrio is completely free and open-source under the MIT License. You can use it in:

Personal projects
Commercial projects
Client work
Products you sell

No attribution required, though it’s always appreciated!

Do I need to attribute Fonttrio?

No, attribution is not required under the MIT License. However, if you’d like to support the project, you can:

Star the GitHub repository
Share it on social media
Mention it in your project’s credits

Can I contribute to Fonttrio?

Absolutely! Fonttrio is open-source and welcomes contributions. You can:

Suggest new font pairings
Report bugs or issues
Improve documentation
Submit code improvements

See the Contributing Guide for more details.

Troubleshooting

Fonts aren't loading in my project

If fonts aren’t appearing:

Check installation: Ensure the pairing was installed successfully
Verify CSS variables: Look in globals.css for the --font-* variables
Check font imports: Make sure fonts are imported in your root layout
Clear cache: Try clearing your Next.js cache with rm -rf .next
Rebuild: Run npm run build or bun run build

CSS variables are undefined

If CSS variables show as undefined:

Make sure fonts are imported in your root layout file
Check that CSS variables are defined in globals.css
Ensure the import order is correct (fonts before CSS)
Verify you’re using the App Router (not Pages Router)

Install command fails

If npx shadcn@latest add fails:

Update shadcn: Make sure you have the latest version
Check URL: Verify the pairing URL is correct
Network issues: Ensure you have internet connectivity
Permissions: Check file system permissions

If the issue persists, open an issue with the error message.

Fonts look different than the preview

If fonts don’t match the preview on fonttrio.xyz:

Check that you’re using the correct font weights
Verify line heights and letter spacing in your CSS
Make sure you haven’t overridden the font variables elsewhere
Check browser font rendering settings

Still Have Questions?

If you didn’t find your answer here:

Check the Getting Started guide
Browse the Contributing Guide
Open an issue on GitHub
Reach out to @kapish_dima on X

Resources

Frequently Asked Questions

Installation

Customization

Fonts & Compatibility

Usage & Pricing

Troubleshooting

Still Have Questions?

Build docs developers (and LLMs) love

Resources

​Installation

​Customization

​Fonts & Compatibility

​Usage & Pricing

​Troubleshooting

​Still Have Questions?

Build docs developers (and LLMs) love

Installation

Customization

Fonts & Compatibility

Usage & Pricing

Troubleshooting

Still Have Questions?