> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/kapishdima/fonttrio/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

<Steps>
  <Step title="Next.js 14+ with App Router">
    Fonttrio pairings use `next/font/google` for optimal font loading.

    ```bash theme={null}
    npx create-next-app@latest my-app
    ```
  </Step>

  <Step title="shadcn/ui Installed">
    The shadcn CLI must be configured in your project.

    ```bash theme={null}
    npx shadcn@latest init
    ```
  </Step>

  <Step title="Tailwind CSS">
    Tailwind should be configured as part of your Next.js or shadcn setup.
  </Step>
</Steps>

<Note>
  If you haven't set up shadcn/ui yet, follow the [official installation guide](https://ui.shadcn.com/docs/installation/next) first.
</Note>

## Installation Command

Install any pairing using the shadcn CLI:

```bash theme={null}
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:

<CodeGroup>
  ```bash npm theme={null}
  npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
  ```

  ```bash yarn theme={null}
  yarn dlx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
  ```

  ```bash pnpm theme={null}
  pnpm dlx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
  ```

  ```bash bun theme={null}
  bunx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
  ```
</CodeGroup>

## 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:

```tsx theme={null}
// 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",
});
```

```tsx theme={null}
// 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",
});
```

```tsx theme={null}
// 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:

```tsx theme={null}
// 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`:

```css theme={null}
@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:

```css theme={null}
@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);
  }
}
```

<Warning>
  The typography scale is applied globally. If you have existing font styles, they will be overridden. See the [customization guide](/guides/customizing-typography) to adjust the scale.
</Warning>

## Applying Fonts to Your Layout

After installation, apply the fonts in your root layout:

```tsx app/layout.tsx theme={null}
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

```tsx theme={null}
<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

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

### With CSS Modules

```css styles.module.css theme={null}
.heading {
  font-family: var(--font-heading);
}

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

<Note>
  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.
</Note>

## 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:

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json --overwrite
```

### Silent Mode

Skip confirmation prompts:

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json --yes
```

### Custom Path

Install to a different directory:

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json --path ./src
```

## Available Pairings

Here are some popular pairings you can install:

### Editorial

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
```

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

### Minimal

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json
```

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

### Corporate

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/corporate.json
```

Raleway + Open Sans + Roboto Mono — Professional and trustworthy

### Impact

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/impact.json
```

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

### Protocol

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/protocol.json
```

Sora + Inter + JetBrains Mono — Modern fintech and SaaS

<Note>
  Visit [fonttrio.xyz](https://www.fonttrio.xyz) to browse all 49 available pairings with live previews.
</Note>

## Verifying Installation

After installation, verify everything is set up correctly:

<Steps>
  <Step title="Check Registry Files">
    Confirm the font files exist in `registry/fonts/` and the pairing exists in `registry/pairings/`.
  </Step>

  <Step title="Check globals.css">
    Verify CSS variables and typography scale rules were added.
  </Step>

  <Step title="Update Layout">
    Add the font variables to your root layout as shown above.
  </Step>

  <Step title="Test in Browser">
    Run your dev server and inspect headings in the browser DevTools to confirm fonts are loading from Google Fonts.
  </Step>
</Steps>

## 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

<CardGroup cols={2}>
  <Card title="Customize Typography" icon="sliders" href="/guides/customizing-typography">
    Adjust font sizes, weights, and spacing to match your design.
  </Card>

  <Card title="Mix Multiple Pairings" icon="layer-group" href="/guides/mixing-pairings">
    Learn how to install and switch between multiple pairings.
  </Card>
</CardGroup>