` 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: ```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 Visit [fonttrio.xyz](https://www.fonttrio.xyz) to browse all 49 available pairings with live previews. ## Verifying Installation After installation, verify everything is set up correctly: Confirm the font files exist in `registry/fonts/` and the pairing exists in `registry/pairings/`. Verify CSS variables and typography scale rules were added. Add the font variables to your root layout as shown above. 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 `` 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 `` element, not `` 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 Adjust font sizes, weights, and spacing to match your design. Learn how to install and switch between multiple pairings. # Mixing Multiple Pairings Source: https://kapishdima-fonttrio.mintlify.app/guides/mixing-pairings Learn how to install multiple font pairings, switch between them, and create custom combinations in your shadcn/ui project. Fonttrio allows you to install multiple pairings in the same project, making it easy to switch between different font combinations or use different pairings for different sections of your application. ## Why Mix Pairings? Installing multiple pairings is useful for: * **A/B testing** different typography styles before committing * **Multi-section apps** where different areas need different moods (e.g., marketing landing page + documentation + app dashboard) * **Theme switching** to let users choose their preferred reading experience * **Custom combinations** by mixing fonts from different pairings ## Installing Multiple Pairings You can install as many pairings as you want. Each pairing adds its fonts to the `registry/` directory: Start with your primary pairing. ```bash theme={null} npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json ``` This installs: * `registry/fonts/playfair-display.tsx` * `registry/fonts/source-serif-4.tsx` * `registry/fonts/jetbrains-mono.tsx` * `registry/pairings/editorial.tsx` Add another pairing for comparison or mixing. ```bash theme={null} npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json ``` This adds: * `registry/fonts/inter.tsx` (new) * `registry/fonts/jetbrains-mono.tsx` (skipped, already exists) * `registry/pairings/minimal.tsx` (new) Keep adding pairings as needed. ```bash theme={null} npx shadcn@latest add https://www.fonttrio.xyz/r/corporate.json npx shadcn@latest add https://www.fonttrio.xyz/r/impact.json ``` Shared fonts (like JetBrains Mono, which appears in many pairings) are only installed once. Subsequent pairings will reuse the existing font file. ## Switching Between Pairings Once you have multiple pairings installed, you can switch between them in your layout: ### Method 1: Direct Import Swap The simplest way is to change which pairing you import: ```tsx app/layout.tsx theme={null} // Switch this import to change the active pairing import { editorial } from "@/registry/pairings/editorial"; // import { minimal } from "@/registry/pairings/minimal"; // import { corporate } from "@/registry/pairings/corporate"; import "./globals.css"; export default function RootLayout({ children }) { return ( {children} ); } ``` To switch pairings: 1. Comment out the current import 2. Uncomment the desired pairing import 3. Update the className to use the new pairing's variables ### Method 2: Environment-Based Selection Use environment variables to select pairings: ```tsx app/layout.tsx theme={null} import { editorial } from "@/registry/pairings/editorial"; import { minimal } from "@/registry/pairings/minimal"; import { corporate } from "@/registry/pairings/corporate"; import "./globals.css"; const pairings = { editorial, minimal, corporate, }; const activePairing = pairings[ (process.env.NEXT_PUBLIC_FONT_PAIRING as keyof typeof pairings) || "editorial" ]; export default function RootLayout({ children }) { return ( {children} ); } ``` Set in `.env.local`: ```bash .env.local theme={null} NEXT_PUBLIC_FONT_PAIRING=minimal ``` ### Method 3: User-Selectable Themes Allow users to switch fonts dynamically: ```tsx app/providers.tsx theme={null} "use client"; import { createContext, useContext, useState, ReactNode } from "react"; import { editorial } from "@/registry/pairings/editorial"; import { minimal } from "@/registry/pairings/minimal"; import { corporate } from "@/registry/pairings/corporate"; type PairingName = "editorial" | "minimal" | "corporate"; const pairings = { editorial, minimal, corporate }; const FontContext = createContext<{ pairing: PairingName; setPairing: (name: PairingName) => void; }>({ pairing: "editorial", setPairing: () => {}, }); export function FontProvider({ children }: { children: ReactNode }) { const [pairing, setPairing] = useState("editorial"); const activePairing = pairings[pairing]; return (

Email {/* Uses --font-body */} {/* Uses --font-body */}

{/* Uses --font-body */}
</div>
```

### Code Components

Code blocks and inline code use monospace font:

```tsx theme={null}
import { Badge } from "@/components/ui/badge";

<code className="font-[family-name:var(--font-mono)]">
  npm install
</code>

<pre className="font-[family-name:var(--font-mono)]">
  <code>const example = true;</code>
</pre>
```

<Note>
  If you've installed a Fonttrio pairing, the global CSS already applies `--font-mono` to `<code>` and `<pre>` elements, so you don't need to add classes manually.
</Note>

## Customizing Component Typography

You can customize how fonts apply to specific components.

### Modify Component Files

Since shadcn/ui components are copied into your project, you can edit them directly:

```tsx components/ui/card.tsx theme={null}
const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        "rounded-lg border bg-card text-card-foreground shadow-sm",
        "font-[family-name:var(--font-body)]", // Explicitly set body font
        className
      )}
      {...props}
    />
  )
)

const CardTitle = React.forwardRef<HTMLParagraphElement, CardTitleProps>(
  ({ className, ...props }, ref) => (
    <h3
      ref={ref}
      className={cn(
        "text-2xl font-semibold leading-none tracking-tight",
        "font-[family-name:var(--font-heading)]", // Explicitly set heading font
        className
      )}
      {...props}
    />
  )
)
```

### Create Font-Aware Variants

Add font variants to component APIs using `cva`:

```tsx components/ui/button.tsx theme={null}
import { cva, type VariantProps } from "class-variance-authority";

const buttonVariants = cva(
  "inline-flex items-center justify-center...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground...",
        outline: "border border-input...",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 px-3",
        lg: "h-11 px-8",
      },
      font: {
        body: "font-[family-name:var(--font-body)]",
        heading: "font-[family-name:var(--font-heading)]",
        mono: "font-[family-name:var(--font-mono)]",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      font: "body",
    },
  }
);
```

Use in components:

```tsx theme={null}
<Button font="heading">Bold CTA</Button>
<Button font="mono">Technical Action</Button>
```

### Create Typography Utilities

Define reusable typography classes:

```css app/globals.css theme={null}
@layer utilities {
  .font-heading {
    font-family: var(--font-heading);
  }

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

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

Or extend Tailwind config:

```js tailwind.config.js theme={null}
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        heading: "var(--font-heading)",
        body: "var(--font-body)",
        mono: "var(--font-mono)",
      },
    },
  },
}
```

Use in components:

```tsx theme={null}
<h1 className="font-heading">Heading</h1>
<p className="font-body">Body text</p>
<code className="font-mono">Code</code>
```

## Component-Specific Examples

### Accordion

```tsx theme={null}
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger className="font-heading text-lg">
      Styled with heading font
    </AccordionTrigger>
    <AccordionContent className="font-body">
      Content uses body font for readability.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

### Tabs

```tsx theme={null}
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1" className="font-heading">Features</TabsTrigger>
    <TabsTrigger value="tab2" className="font-heading">Pricing</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1" className="font-body">
    Feature description text...
  </TabsContent>
</Tabs>
```

### Dialog

```tsx theme={null}
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";

<Dialog>
  <DialogContent>
    <DialogHeader>
      <DialogTitle className="font-heading">Dialog Title</DialogTitle>
      <DialogDescription className="font-body">
        This description uses the body font.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>
```

### Badge

```tsx theme={null}
import { Badge } from "@/components/ui/badge";

{/* Default: uses body font */}
<Badge>New</Badge>

{/* Monospace for technical badges */}
<Badge className="font-mono">v2.0.1</Badge>

{/* Heading font for emphasis */}
<Badge className="font-heading font-bold">Featured</Badge>
```

### Select

```tsx theme={null}
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@/components/ui/select";

<Select>
  <SelectTrigger className="font-body">
    <SelectValue placeholder="Choose option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1" className="font-body">Option 1</SelectItem>
    <SelectItem value="option2" className="font-body">Option 2</SelectItem>
  </SelectContent>
</Select>
```

## Dark Mode Considerations

Fonttrio pairings work seamlessly with shadcn/ui's dark mode:

```tsx theme={null}
import { ThemeProvider } from "@/components/theme-provider";
import { editorial } from "@/registry/pairings/editorial";

export default function RootLayout({ children }) {
  return (
    <html 
      className={`
        ${editorial.heading.variable} 
        ${editorial.body.variable} 
        ${editorial.mono.variable}
      `}
      suppressHydrationWarning
    >
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
```

### Adjusting Font Weight for Dark Mode

Some fonts may need lighter weights in dark mode:

```css app/globals.css theme={null}
@layer base {
  h1 {
    font-family: var(--font-heading);
    font-weight: 700;
  }

.dark h1 {
    font-weight: 600;  /* Lighter in dark mode */
  }

.dark body, .dark p {
    font-weight: 400;  /* Ensure readability */
  }
}
```

## Best Practices

### 1. Maintain Consistency

Use the same fonts for similar UI elements:

```tsx theme={null}
// Good: Consistent button text
<Button>Submit</Button>
<Button>Cancel</Button>

// Avoid: Mixing fonts arbitrarily
<Button className="font-heading">Submit</Button>
<Button className="font-mono">Cancel</Button>
```

### 2. Respect Component Semantics

Use heading fonts for titles, body fonts for content:

```tsx theme={null}
// Good
<CardTitle className="font-heading">Title</CardTitle>
<CardDescription className="font-body">Description</CardDescription>

// Avoid
<CardTitle className="font-mono">Title</CardTitle>
```

### 3. Test with Real Content

Test components with actual text, not placeholder content:

```tsx theme={null}
// Test with realistic lengths
<CardTitle>Understanding the Impact of Typography on User Experience</CardTitle>
<CardDescription>
  Typography plays a crucial role in how users perceive and interact with
  your application. Choosing the right fonts can improve readability and
  establish visual hierarchy.
</CardDescription>
```

### 4. Consider Font Fallbacks

Ensure graceful degradation:

```tsx theme={null}
import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  fallback: ["system-ui", "arial"],  // Fallback fonts
});
```

### 5. Use Monospace Appropriately

Reserve monospace fonts for code and technical content:

```tsx theme={null}
// Good uses
<code className="font-mono">npm install</code>
<Badge className="font-mono">v1.0.0</Badge>
<Input className="font-mono" type="text" placeholder="API Key" />

// Avoid
<Button className="font-mono">Click me</Button>
<CardTitle className="font-mono">Welcome</CardTitle>
```

## Building a Design System

Create a comprehensive design system with Fonttrio + shadcn/ui:

### Define Typography Tokens

```ts lib/design-tokens.ts theme={null}
export const typography = {
  fonts: {
    heading: "var(--font-heading)",
    body: "var(--font-body)",
    mono: "var(--font-mono)",
  },
  sizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    base: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
  },
  weights: {
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
  },
  lineHeights: {
    tight: "1.2",
    normal: "1.5",
    relaxed: "1.65",
    loose: "1.75",
  },
};
```

### Create Reusable Typography Components

```tsx components/typography/heading.tsx theme={null}
import { cn } from "@/lib/utils";
import { typography } from "@/lib/design-tokens";

interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  level?: 1 | 2 | 3 | 4 | 5 | 6;
  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}

export function Heading({ 
  level = 1, 
  as, 
  className, 
  children,
  ...props 
}: HeadingProps) {
  const Tag = as || `h${level}` as const;
  
  return (
    <Tag
      className={cn(
        "font-heading scroll-m-20",
        className
      )}
      {...props}
    >
      {children}
    </Tag>
  );
}
```

```tsx components/typography/text.tsx theme={null}
import { cn } from "@/lib/utils";

interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
  size?: "sm" | "base" | "lg";
  variant?: "body" | "mono";
}

export function Text({ 
  size = "base", 
  variant = "body",
  className, 
  children,
  ...props 
}: TextProps) {
  const fontClass = variant === "mono" ? "font-mono" : "font-body";
  
  return (
    <p
      className={cn(
        fontClass,
        size === "sm" && "text-sm",
        size === "base" && "text-base",
        size === "lg" && "text-lg",
        className
      )}
      {...props}
    >
      {children}
    </p>
  );
}
```

Use in components:

```tsx theme={null}
import { Heading } from "@/components/typography/heading";
import { Text } from "@/components/typography/text";

<div>
  <Heading level={1}>Page Title</Heading>
  <Text size="lg">Introduction paragraph...</Text>
  <Heading level={2}>Section Title</Heading>
  <Text>Section content...</Text>
  <Text variant="mono" size="sm">Technical note</Text>
</div>
```

## Troubleshooting

### Fonts Not Applying to Components

If shadcn/ui components don't show your fonts:

1. Verify font variables are in the `<html>` element, not `<body>`
2. Check that `globals.css` is imported before component usage
3. Inspect in DevTools to see which font is actually applied
4. Ensure Tailwind isn't purging the font classes (check `tailwind.config.js`)

### Component Styles Overriding Fonts

If component styles override your fonts:

1. Use `!important` sparingly: `className="!font-heading"`
2. Increase specificity by editing the component file directly
3. Check the component's default className prop for conflicting font settings

### Fonts Look Different Than Preview Site

If your implementation doesn't match the Fonttrio preview:

1. Verify you're using the same typography scale (check `globals.css`)
2. Ensure font weights are loading correctly (check Network tab)
3. Compare line height and letter spacing values
4. Check that you're not overriding font settings with Tailwind classes

## Example: Complete Component Integration

Here's a full example of a Card component with proper typography:

```tsx components/feature-card.tsx theme={null}
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

interface FeatureCardProps {
  title: string;
  description: string;
  version: string;
  codeExample: string;
}

export function FeatureCard({ 
  title, 
  description, 
  version, 
  codeExample 
}: FeatureCardProps) {
  return (
    <Card>
      <CardHeader>
        <div className="flex items-start justify-between">
          <CardTitle className="font-heading text-2xl">
            {title}
          </CardTitle>
          <Badge className="font-mono text-xs">
            {version}
          </Badge>
        </div>
        <CardDescription className="font-body text-base leading-relaxed">
          {description}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <pre className="font-mono text-sm bg-muted p-4 rounded-md overflow-x-auto">
          <code>{codeExample}</code>
        </pre>
        <Button className="font-body mt-4 w-full">
          Learn More
        </Button>
      </CardContent>
    </Card>
  );
}
```

Usage:

```tsx theme={null}
<FeatureCard
  title="Typography Scale"
  description="Each pairing includes a complete typography scale from h1 through body text, with carefully tuned sizes, weights, and spacing."
  version="v2.0"
  codeExample={`const scale = {
  h1: { size: "2.25rem", weight: 700 },
  body: { size: "1rem", lineHeight: "1.65" },
};`}
/>
```

## Next Steps

<CardGroup>
  <Card title="Browse Pairings" icon="eye" href="/guides/browsing-pairings">
    Explore all 49 curated font pairings with live previews.
  </Card>

<Card title="Customize Typography" icon="sliders" href="/guides/customizing-typography">
    Fine-tune font sizes, weights, and spacing for your design.
  </Card>
</CardGroup>

# Installation
Source: https://kapishdima-fonttrio.mintlify.app/installation

Detailed installation instructions for Fonttrio font pairings in Next.js projects.

# Installation

This guide covers everything you need to know about installing and setting up Fonttrio in your project.

## Requirements

Before installing Fonttrio, ensure your project meets these requirements:

<CardGroup>
  <Card title="Next.js 14+" icon="react">
    App Router required for `next/font` support
  </Card>

<Card title="shadcn/ui" icon="component">
    CLI must be installed and configured
  </Card>

<Card title="Tailwind CSS" icon="paintbrush">
    Required for utility classes
  </Card>
</CardGroup>

<Note>
  Fonttrio uses the shadcn/ui registry system, which requires the shadcn CLI to be installed in your project.
</Note>

## Prerequisites Setup

If you're starting a new project, follow these steps:

<Steps>
  <Step title="Create a Next.js project">
    Create a new Next.js 14+ project with the App Router:

```bash theme={null}
    npx create-next-app@latest my-app
    ```

When prompted, select:

* ✅ TypeScript
    * ✅ Tailwind CSS
    * ✅ App Router
  </Step>

<Step title="Initialize shadcn/ui">
    Install and configure shadcn/ui in your project:

```bash theme={null}
    npx shadcn@latest init
    ```

This will:

* Install required dependencies
    * Create `components.json` configuration
    * Set up your `components/ui` directory
    * Configure your `tailwind.config` and `globals.css`
  </Step>

<Step title="Verify setup">
    Ensure your project has these files:

* `app/layout.tsx` - App Router layout
    * `app/globals.css` - Global styles
    * `components.json` - shadcn configuration
    * `tailwind.config.ts` - Tailwind configuration
  </Step>
</Steps>

## Installing a Font Pairing

<Steps>
  <Step title="Browse available pairings">
    Visit [fonttrio.xyz](https://www.fonttrio.xyz) to browse all 49 curated pairings. Each pairing page includes:

* Live preview with actual fonts
    * Typography scale visualization
    * Interactive type tester
    * Context previews (blog, landing, docs)
    * One-click copy install command
  </Step>

<Step title="Copy the install command">
    Each pairing has a unique registry URL. The install command follows this pattern:

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

For example, to install the Editorial pairing:

<CodeGroup>
      ```bash npm theme={null}
      npx 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 yarn theme={null}
      yarn 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>
  </Step>

<Step title="What gets installed">
    The shadcn CLI will:

1. **Download font configurations** from the Fonttrio registry
    2. **Install three fonts** (heading, body, mono) via `next/font/google`
    3. **Add CSS variables** to your `app/globals.css`:
       ```css theme={null}
       :root {
         --font-heading: var(--font-playfair-display);
         --font-body: var(--font-source-serif-4);
         --font-mono: var(--font-jetbrains-mono);
       }
       ```
    4. **Apply typography scale** with optimized sizing:
       ```css theme={null}
       h1 {
         font-family: var(--font-heading);
         font-size: 2.25rem;
         line-height: 1.2;
         letter-spacing: -0.025em;
         font-weight: 700;
       }
       ```
    5. **Configure font loading** in your root layout
  </Step>

<Step title="Verify installation">
    Check your `app/globals.css` file. You should see:

* Font variable declarations in `:root`
    * Typography scale styles for h1-h6
    * Body and code font assignments

Example output for the Editorial pairing:

```css theme={null}
    /* Font variables */
    :root {
      --font-heading: var(--font-playfair-display);
      --font-body: var(--font-source-serif-4);
      --font-mono: var(--font-jetbrains-mono);
    }

/* Typography scale */
    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;
    }

/* ... more styles ... */

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

code, pre {
      font-family: var(--font-mono);
    }
    ```
  </Step>
</Steps>

## Registry Structure

Each pairing is distributed as a JSON registry item:

```json theme={null}
{
  "name": "pairing-editorial",
  "type": "registry:style",
  "extends": "none",
  "title": "Editorial — Playfair Display + Source Serif 4 + JetBrains Mono",
  "description": "Classic editorial pairing. High-contrast serif headings with readable serif body text.",
  "categories": ["serif", "editorial", "elegant"],
  "registryDependencies": [
    "https://www.fonttrio.xyz/r/playfair-display.json",
    "https://www.fonttrio.xyz/r/source-serif-4.json",
    "https://www.fonttrio.xyz/r/jetbrains-mono.json"
  ],
  "cssVars": {
    "theme": {
      "--font-heading": "var(--font-playfair-display)",
      "--font-body": "var(--font-source-serif-4)",
      "--font-mono": "var(--font-jetbrains-mono)"
    }
  },
  "css": {
    "h1": {
      "font-family": "var(--font-heading)",
      "font-size": "2.25rem",
      "line-height": "1.2",
      "letter-spacing": "-0.025em",
      "font-weight": "700"
    }
    // ... more styles
  },
  "meta": {
    "mood": ["elegant", "traditional", "authoritative"],
    "useCase": ["blog", "editorial", "magazine", "documentation"]
  }
}
```

## Using Fonts in Your App

After installation, fonts are available throughout your project:

### Automatic HTML Element Styling

The typography scale automatically styles HTML elements:

```tsx theme={null}
export default function Page() {
  return (
    <div>
      <h1>This uses --font-heading</h1>
      <h2>This also uses --font-heading</h2>
      <p>This uses --font-body</p>
      <code>This uses --font-mono</code>
    </div>
  )
}
```

### Using CSS Variables Directly

For custom components, use the CSS variables with Tailwind:

```tsx theme={null}
export default function CustomCard() {
  return (
    <div className="font-[family-name:var(--font-body)]">
      <h3 className="font-[family-name:var(--font-heading)] text-2xl">
        Card Title
      </h3>
      <p className="text-muted-foreground">
        Card description text
      </p>
    </div>
  )
}
```

### In Tailwind Config

You can also extend your Tailwind config to create utility classes:

```ts theme={null}
// tailwind.config.ts
export default {
  theme: {
    extend: {
      fontFamily: {
        heading: 'var(--font-heading)',
        body: 'var(--font-body)',
        mono: 'var(--font-mono)',
      },
    },
  },
}
```

Then use them as Tailwind classes:

```tsx theme={null}
<h1 className="font-heading">Heading</h1>
<p className="font-body">Body text</p>
<code className="font-mono">Code</code>
```

## Installing Multiple Pairings

You can install multiple pairings in the same project:

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

All fonts will be loaded, and you can switch between pairings by updating the CSS variables:

```css theme={null}
/* Use Editorial */
:root {
  --font-heading: var(--font-playfair-display);
  --font-body: var(--font-source-serif-4);
  --font-mono: var(--font-jetbrains-mono);
}

/* Or use Minimal */
:root {
  --font-heading: var(--font-inter);
  --font-body: var(--font-inter);
  --font-mono: var(--font-jetbrains-mono);
}
```

## Customizing Typography Scale

You can customize the typography scale by editing `globals.css`:

```css theme={null}
h1 {
  font-family: var(--font-heading);
  font-size: 3rem; /* Increased from 2.25rem */
  line-height: 1.1; /* Tightened from 1.2 */
  letter-spacing: -0.03em; /* More negative spacing */
  font-weight: 800; /* Bolder */
}
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="Fonts not loading">
    **Symptom:** Fonts don't appear after installation.

**Solutions:**

1. Clear your browser cache and hard refresh (Cmd/Ctrl + Shift + R)
    2. Restart your Next.js dev server
    3. Check that CSS variables are present in `globals.css`
    4. Verify `next/font` is working:
       ```bash theme={null}
       npm list next
       ```
    5. Check browser console for font loading errors
  </Accordion>

<Accordion title="CSS variables not found">
    **Symptom:** Console shows "CSS variable not found" errors.

**Solutions:**

1. Verify the pairing was installed:
       ```bash theme={null}
       cat app/globals.css | grep "font-heading"
       ```
    2. Ensure `globals.css` is imported in your root layout:
       ```tsx theme={null}
       // app/layout.tsx
       import './globals.css'
       ```
    3. Check CSS variable syntax - should use `var(--font-heading)` not `--font-heading`
  </Accordion>

<Accordion title="Typography scale not applying">
    **Symptom:** HTML elements don't have the expected styling.

**Solutions:**

1. Check CSS specificity - your custom styles may be overriding Fonttrio
    2. Ensure no other CSS is resetting h1-h6 styles
    3. Verify the typography scale CSS is present after the variables in `globals.css`
    4. Try using `!important` temporarily to diagnose specificity issues
  </Accordion>

<Accordion title="shadcn CLI errors">
    **Symptom:** `shadcn add` command fails.

**Solutions:**

1. Verify shadcn is initialized:
       ```bash theme={null}
       cat components.json
       ```
    2. Update to latest shadcn version:
       ```bash theme={null}
       npm install -g shadcn@latest
       ```
    3. Check internet connection - registry must be reachable
    4. Try with full URL including `.json` extension
  </Accordion>

<Accordion title="Font weights look wrong">
    **Symptom:** Fonts appear too bold or too light.

**Solutions:**

1. Check which font weights are loaded in the registry JSON
    2. Google Fonts may not include all weights for every font
    3. Customize weight in your CSS:
       ```css theme={null}
       h1 {
         font-weight: 600; /* Adjust as needed */
       }
       ```
    4. Some fonts have optical size variants - check if that's enabled
  </Accordion>

<Accordion title="Performance issues">
    **Symptom:** Slow page loads or layout shift.

**Solutions:**

1. Fonttrio uses `next/font` which includes automatic optimization
    2. Fonts are loaded from Google Fonts CDN with optimal caching
    3. Reduce number of font weights if performance is critical
    4. Use `font-display: swap` (default in next/font)
    5. Consider font subsetting for non-Latin characters
  </Accordion>
</AccordionGroup>

## Best Practices

<CardGroup>
  <Card title="Font Loading" icon="bolt">
    * Let `next/font` handle optimization
    * Don't manually load Google Fonts
    * Keep font weights minimal (2-3 max)
    * Use variable fonts when available
  </Card>

<Card title="CSS Variables" icon="code">
    * Use the provided variables consistently
    * Don't hardcode font family names
    * Extend in Tailwind config for convenience
    * Document any customizations
  </Card>

<Card title="Typography Scale" icon="text-size">
    * Maintain consistent scale ratios
    * Test at different viewport sizes
    * Use relative units (rem) for accessibility
    * Keep line heights readable (1.5-1.65 for body)
  </Card>

<Card title="Customization" icon="wrench">
    * Start with defaults, then customize
    * Test changes across all components
    * Document your scale in design system
    * Consider dark mode contrast
  </Card>
</CardGroup>

## Next Steps

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Get started in under 2 minutes
  </Card>

<Card title="Browse Pairings" icon="grid" href="https://www.fonttrio.xyz">
    Explore all 49 curated pairings
  </Card>

<Card title="Examples" icon="code">
    See real-world usage examples
  </Card>
</CardGroup>

<Warning>
  **License Note:** All fonts distributed through Fonttrio are from Google Fonts and are open source. Check individual font licenses for commercial use terms.
</Warning>

# Introduction
Source: https://kapishdima-fonttrio.mintlify.app/introduction

Curated font pairings for shadcn/ui projects. Install perfect typography in seconds.

# Introduction to Fonttrio

Three fonts. One command.

Fonttrio is a curated collection of font pairings designed specifically for shadcn/ui projects. Each pairing includes a carefully selected combination of heading, body, and monospace fonts that work together harmoniously.

## Why Fonttrio?

Building a typography system from scratch is time-consuming. Finding fonts that complement each other, establishing the right scale, and setting up CSS variables takes hours of work. Fonttrio solves this by providing ready-made, battle-tested font combinations that you can install in seconds.

<Note>
  Fonttrio uses the shadcn/ui registry system to distribute font pairings, making installation as simple as adding a component.
</Note>

## Key Features

<CardGroup>
  <Card title="49 Curated Pairings" icon="palette">
    From editorial to corporate, minimal to bold - carefully selected combinations for every project type.
  </Card>

<Card title="Complete Typography Scale" icon="text-size">
    Each pairing includes h1 through body sizing with optimized line heights and letter spacing.
  </Card>

<Card title="CSS Variables" icon="code">
    Ready-to-use CSS custom properties for easy theming throughout your project.
  </Card>

<Card title="One Command Install" icon="terminal">
    Add any pairing to your project instantly using the shadcn CLI.
  </Card>

<Card title="Google Fonts Integration" icon="globe">
    All fonts loaded from Google Fonts CDN with optimal performance.
  </Card>

<Card title="Dark Mode Ready" icon="moon">
    Works seamlessly with shadcn/ui's theming system out of the box.
  </Card>
</CardGroup>

## How It Works

Fonttrio leverages the shadcn/ui registry system to distribute font pairings. When you install a pairing:

1. **Fonts are configured** in your Next.js app via `next/font/google`
2. **CSS variables are set up** in your `globals.css` file
3. **Typography scale is applied** through CSS custom properties
4. **All components can use the font variables** immediately

Each pairing is structured as a registry item that includes:

```json theme={null}
{
  "name": "pairing-editorial",
  "type": "registry:style",
  "registryDependencies": [
    "https://www.fonttrio.xyz/r/playfair-display.json",
    "https://www.fonttrio.xyz/r/source-serif-4.json",
    "https://www.fonttrio.xyz/r/jetbrains-mono.json"
  ],
  "cssVars": {
    "theme": {
      "--font-heading": "var(--font-playfair-display)",
      "--font-body": "var(--font-source-serif-4)",
      "--font-mono": "var(--font-jetbrains-mono)"
    }
  }
}
```

## Pairing Categories

Fonttrio offers pairings organized by style and use case:

### Editorial

Sophisticated combinations for content-heavy sites

* **Editorial** — Playfair Display + Source Serif 4 + JetBrains Mono
* **Literary** — Crimson Text + Source Serif 4 + IBM Plex Mono
* **Newspaper** — Merriweather + Merriweather + Cousine

### Clean

Minimal, modern combinations

* **Minimal** — Inter + Inter + JetBrains Mono
* **Swiss** — Work Sans + Work Sans + Source Code Pro
* **Modern Clean** — Space Grotesk + Space Grotesk + Space Mono

### Bold

High-impact combinations for marketing

* **Impact** — Bebas Neue + Barlow + Fira Code
* **Poster** — Alfa Slab One + Assistant + Roboto Mono
* **Headline** — Anton + Heebo + Fira Code

### Corporate

Professional combinations for business

* **Corporate** — Raleway + Open Sans + Roboto Mono
* **Protocol** — Sora + Inter + JetBrains Mono
* **Fintech** — Plus Jakarta Sans + Inter + Source Code Pro

### Creative

Unique combinations for portfolios and creative work

* **Creative** — Syne + Manrope + Fira Code
* **Studio** — Space Grotesk + DM Sans + Fira Code
* **Agency** — Schibsted Grotesk + Karla + Fira Code

<Tip>
  Visit [fonttrio.xyz](https://www.fonttrio.xyz) to browse all 49 pairings with live previews and interactive type testers.
</Tip>

## What's Included

Each pairing provides:

* **Three Google Fonts** (heading, body, monospace)
* **Typography scale** with h1-h6 and body styles
* **CSS variables** for font families
* **Optimized font loading** via next/font
* **Metadata** including mood tags and use cases

## Get Started

Ready to add beautiful typography to your project? Continue to the [Quickstart](/quickstart) guide to install your first pairing, or see the detailed [Installation](/installation) instructions.

<Card title="Quickstart Guide" icon="rocket" href="/quickstart">
  Install a font pairing and see it in action in under 2 minutes.
</Card>

# Quickstart
Source: https://kapishdima-fonttrio.mintlify.app/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.

<Note>
  This guide assumes you already have a Next.js 14+ project with shadcn/ui and Tailwind CSS installed. If not, see the [Installation](/installation) guide for setup instructions.
</Note>

## Install a Pairing

<Steps>
  <Step title="Choose a pairing">
    Browse available pairings at [fonttrio.xyz](https://www.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.
  </Step>

<Step title="Run the install command">
    Install the pairing using the shadcn CLI:

<CodeGroup>
      ```bash npm theme={null}
      npx 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 yarn theme={null}
      yarn 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>

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
  </Step>

<Step title="Verify installation">
    Check that the following CSS variables were added to your `app/globals.css`:

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

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

<Step title="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)

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

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

<Step title="Preview your changes">
    Start your development server:

```bash theme={null}
    npm run dev
    ```

Visit your app and you'll see the new typography in action!
  </Step>
</Steps>

## Try Different Pairings

You can install multiple pairings and switch between them:

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

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

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

<CardGroup>
  <Card title="Browse All Pairings" icon="grid" href="https://www.fonttrio.xyz">
    Explore all 49 curated font pairings with live previews
  </Card>

<Card title="Installation Guide" icon="book" href="/installation">
    Detailed setup instructions and troubleshooting
  </Card>

<Card title="Customization" icon="wrench">
    Learn how to customize typography scales and font weights
  </Card>

<Card title="Examples" icon="code">
    See real-world examples of Fonttrio in production
  </Card>
</CardGroup>

<Tip>
  Each pairing page on [fonttrio.xyz](https://www.fonttrio.xyz) includes an interactive type tester and context previews to help you make the right choice.
</Tip>

# Changelog
Source: https://kapishdima-fonttrio.mintlify.app/resources/changelog

Track updates, new features, and improvements to Fonttrio.

Stay up to date with the latest changes, new font pairings, and improvements to Fonttrio.

## Recent Updates

<Note>
  For the most up-to-date changelog and version history, visit the [GitHub Releases](https://github.com/kapishdima/fonttrio/releases) page.
</Note>

### Mobile Adaptive Design

**Latest** — Mobile responsiveness improvements

Improved the Fonttrio website experience on mobile devices:

* Responsive typography previews
* Better navigation on small screens
* Optimized pairing cards for mobile
* Touch-friendly type testers

### Payment Integration

**Recent** — Added support links

Integrated payment and sponsorship options:

* Support links for contributing to the project
* Sponsor acknowledgments
* Community support options

### SEO Optimization

**Recent** — Improved discoverability

Enhanced search engine optimization:

* Updated Open Graph images
* Better meta descriptions for pairing pages
* Improved social media sharing previews
* Schema.org markup for font pairings

### MIT License

**v0.1.0** — Open source release

Fonttrio is now fully open source under the MIT License:

* Use in any project (personal or commercial)
* No attribution required
* Community contributions welcome
* Full source code available on [GitHub](https://github.com/kapishdima/fonttrio)

## What's Included

Fonttrio currently features:

<CardGroup>
  <Card title="49 Font Pairings" icon="palette">
    Carefully curated combinations across 5 categories
  </Card>

<Card title="shadcn/ui Integration" icon="puzzle-piece">
    One-command installation via the shadcn registry
  </Card>

<Card title="Google Fonts" icon="font">
    All fonts loaded from Google Fonts CDN
  </Card>

<Card title="Typography Scale" icon="text-height">
    Complete h1–h6 and body text sizing
  </Card>
</CardGroup>

## Pairing Categories

The collection is organized into five main categories:

### Editorial

Sophisticated combinations for content-heavy sites:

* Editorial, Literary, Newspaper, Novel, Memoir, Journal, and more
* Perfect for blogs, magazines, and long-form content

### Clean

Minimal, modern combinations:

* Minimal, Swiss, Modern Clean, and more
* Ideal for SaaS, dashboards, and modern web apps

### Bold

High-impact combinations for marketing:

* Impact, Poster, Headline, Manifesto, and more
* Great for landing pages, marketing sites, and campaigns

### Corporate

Professional combinations for business:

* Corporate, Protocol, Fintech, GovTech, and more
* Suitable for enterprise, financial, and professional services

### Creative

Unique combinations for portfolios and creative work:

* Creative, Studio, Agency, Folio, and more
* Perfect for design studios, portfolios, and creative agencies

## Feature Timeline

<Steps>
  <Step title="Initial Release">
    First version of Fonttrio launched with curated font pairings and shadcn/ui integration.
  </Step>

<Step title="Registry System">
    Built custom registry system for distributing font configurations via shadcn CLI.
  </Step>

<Step title="Typography Previews">
    Added live previews with type tester, context views (blog, landing, docs), and scale visualization.
  </Step>

<Step title="Mobile Optimization">
    Enhanced mobile experience with responsive previews and touch-friendly controls.
  </Step>

<Step title="Open Source">
    Released under MIT License with full source code available on GitHub.
  </Step>
</Steps>

## Upcoming

While we don't have a formal roadmap, here are some areas we're exploring:

* **More Pairings**: Continuously adding new, community-suggested combinations
* **Font Filters**: Better discovery with category and mood filters
* **Custom Scales**: Per-pairing typography scale customization
* **Variable Fonts**: Support for variable font axes where available
* **Export Options**: Export pairings as CSS, Figma, or design tokens

<Note>
  Want to suggest a feature or new pairing? [Open an issue](https://github.com/kapishdima/fonttrio/issues) or check the [Contributing Guide](/resources/contributing).
</Note>

## Version History

Fonttrio follows semantic versioning. Current version: **0.1.0**

### v0.1.0 (Current)

* 49 curated font pairings
* shadcn/ui registry integration
* Complete typography scales
* Dark mode support
* Mobile responsive design
* Open source (MIT License)
* Google Fonts integration via next/font
* Live preview and type tester
* Context previews (blog, landing, docs)

## Stay Updated

To track updates and new releases:

<CardGroup>
  <Card title="GitHub Releases" icon="github" href="https://github.com/kapishdima/fonttrio/releases">
    Official release notes and version history
  </Card>

<Card title="GitHub Repository" icon="code-branch" href="https://github.com/kapishdima/fonttrio">
    Latest commits and development activity
  </Card>

<Card title="Follow on X" icon="x-twitter" href="https://x.com/kapish_dima">
    Updates from the creator
  </Card>

<Card title="Star on GitHub" icon="star" href="https://github.com/kapishdima/fonttrio">
    Get notified of new releases
  </Card>
</CardGroup>

## Contributing

Fonttrio is open source and welcomes contributions:

* **Font Pairings**: Suggest new combinations
* **Bug Reports**: Help us identify and fix issues
* **Documentation**: Improve guides and examples
* **Code**: Submit PRs for features or fixes

See the [Contributing Guide](/resources/contributing) for details.

***

**Fonttrio** is built by [Dima Kapish](https://x.com/kapish_dima) for the shadcn/ui community.

# Contributing
Source: https://kapishdima-fonttrio.mintlify.app/resources/contributing

Help make Fonttrio better by contributing font pairings, reporting issues, or improving the codebase.

Fonttrio is an open-source project, and we welcome contributions from the community. Whether you want to suggest a new font pairing, report a bug, or improve the codebase, your help is appreciated.

## Ways to Contribute

<CardGroup>
  <Card title="Suggest Pairings" icon="palette">
    Have a font combination that works beautifully together? Share it with the community.
  </Card>

<Card title="Report Issues" icon="bug">
    Found a bug or have a feature request? Open an issue on GitHub.
  </Card>

<Card title="Improve Docs" icon="book">
    Help make the documentation clearer and more helpful.
  </Card>

<Card title="Code Contributions" icon="code">
    Contribute to the codebase with bug fixes or new features.
  </Card>
</CardGroup>

## Suggesting New Font Pairings

We're always looking for high-quality font combinations to add to Fonttrio. Here's how to suggest a new pairing:

<Steps>
  <Step title="Check Existing Pairings">
    Browse the [current collection](https://www.fonttrio.xyz) to ensure your pairing isn't already included. We currently have **49 curated pairings**.
  </Step>

<Step title="Test Your Combination">
    Make sure your font pairing:

* Works well together (heading + body + mono)
    * Is available on Google Fonts
    * Has good readability at various sizes
    * Works in both light and dark modes
  </Step>

<Step title="Open an Issue">
    Create a new issue on [GitHub](https://github.com/kapishdima/fonttrio/issues) with:

* **Heading font** name and link to Google Fonts
    * **Body font** name and link to Google Fonts
    * **Monospace font** name and link to Google Fonts
    * **Category** (Editorial, Clean, Bold, Corporate, Creative)
    * **Use case** (blog, landing page, documentation, etc.)
    * **Why** this combination works well
  </Step>

<Step title="Wait for Review">
    The maintainers will review your suggestion and provide feedback. If approved, it will be added to the collection.
  </Step>
</Steps>

<Note>
  All fonts must be available on Google Fonts to ensure they work with the `next/font` integration.
</Note>

## Reporting Issues

Found a bug or have a suggestion? Here's how to report it:

### Before Opening an Issue

* Search [existing issues](https://github.com/kapishdima/fonttrio/issues) to avoid duplicates
* Check if the issue persists in the latest version
* Gather relevant information (browser, OS, Next.js version)

### Opening an Issue

1. Go to [GitHub Issues](https://github.com/kapishdima/fonttrio/issues)
2. Click "New Issue"
3. Provide a clear, descriptive title
4. Include:
   * Steps to reproduce
   * Expected behavior
   * Actual behavior
   * Screenshots (if applicable)
   * Environment details

## Code Contributions

Want to contribute code? Here's how to get started:

### Development Setup

<Steps>
  <Step title="Fork and Clone">
    ```bash theme={null}
    git clone https://github.com/YOUR_USERNAME/fonttrio.git
    cd fonttrio
    ```
  </Step>

<Step title="Install Dependencies">
    Fonttrio uses Bun as the package manager:

```bash theme={null}
    bun install
    ```
  </Step>

<Step title="Run Development Server">
    ```bash theme={null}
    bun run dev
    ```

Open [http://localhost:3000](http://localhost:3000) in your browser.
  </Step>
</Steps>

### Project Structure

```
fonttrio/
├── registry/
│   ├── fonts/          # Individual font configurations
│   └── pairings/       # Font pairing combinations
├── scripts/
│   ├── build-registry.ts       # Builds registry.json
│   ├── generate-fonts.ts       # Generates font configs
│   └── sync-pairings-data.ts   # Syncs pairing data
├── public/r/           # Public registry files
└── app/                # Next.js application
```

### Adding a New Pairing

To add a new font pairing to the registry:

1. **Create a pairing file** in `registry/pairings/your-pairing.json`:

```json theme={null}
{
  "name": "pairing-your-name",
  "type": "registry:style",
  "extends": "none",
  "title": "Your Pairing — Heading Font + Body Font + Mono Font",
  "description": "Brief description of the pairing and its use case.",
  "categories": ["category1", "category2"],
  "registryDependencies": [
    "https://www.fonttrio.xyz/r/heading-font.json",
    "https://www.fonttrio.xyz/r/body-font.json",
    "https://www.fonttrio.xyz/r/mono-font.json"
  ],
  "cssVars": {
    "theme": {
      "--font-heading": "var(--font-heading-name)",
      "--font-body": "var(--font-body-name)",
      "--font-mono": "var(--font-mono-name)"
    }
  },
  "meta": {
    "mood": ["elegant", "modern"],
    "useCase": ["blog", "documentation"]
  }
}
```

2. **Build the registry**:

```bash theme={null}
bun run build:registry
```

3. **Test your pairing** by installing it in a test project:

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

### Code Style

* Use TypeScript for all new code
* Follow the existing code style
* Run `bun run lint` before committing
* Keep commits focused and atomic
* Write clear commit messages

### Available Scripts

* `bun run dev` — Start development server
* `bun run build` — Build for production
* `bun run lint` — Run ESLint
* `bun run generate:fonts` — Generate font configurations
* `bun run generate:candidates` — Generate pairing candidates
* `bun run sync:pairings` — Sync pairing data
* `bun run build:registry` — Build registry.json

### Pull Request Process

<Steps>
  <Step title="Create a Branch">
    ```bash theme={null}
    git checkout -b feature/your-feature-name
    ```
  </Step>

<Step title="Make Your Changes">
    Write your code, following the code style guidelines.
  </Step>

<Step title="Test Thoroughly">
    Ensure your changes work as expected and don't break existing functionality.
  </Step>

<Step title="Commit Your Changes">
    ```bash theme={null}
    git add .
    git commit -m "feat: add your feature"
    ```
  </Step>

<Step title="Push and Create PR">
    ```bash theme={null}
    git push origin feature/your-feature-name
    ```

Then open a Pull Request on GitHub with a clear description of your changes.
  </Step>
</Steps>

### Commit Message Convention

Use conventional commit messages:

* `feat:` — New feature
* `fix:` — Bug fix
* `docs:` — Documentation changes
* `refactor:` — Code refactoring
* `chore:` — Maintenance tasks

## Questions?

If you have questions about contributing:

* Check the [FAQ](/resources/faq) for common questions
* Open a [GitHub Discussion](https://github.com/kapishdima/fonttrio/discussions)
* Reach out to [@kapish\_dima](https://x.com/kapish_dima) on X

## License

By contributing to Fonttrio, you agree that your contributions will be licensed under the MIT License.

***

Thank you for helping make Fonttrio better!

# Frequently Asked Questions
Source: https://kapishdima-fonttrio.mintlify.app/resources/faq

Common questions about installing, customizing, and using Fonttrio font pairings in your shadcn/ui projects.

Find answers to common questions about Fonttrio. If you don't see your question here, feel free to [open an issue](https://github.com/kapishdima/fonttrio/issues) on GitHub.

## Installation

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

<Accordion title="How do I install a font pairing?">
    Use the shadcn CLI to install any pairing:

```bash theme={null}
    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](https://www.fonttrio.xyz).
  </Accordion>

<Accordion title="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.
  </Accordion>

<Accordion title="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.
  </Accordion>

<Accordion title="What happens when I install a pairing?">
    When you install a pairing, the shadcn CLI:

1. Downloads the pairing configuration
    2. Installs the three fonts (heading, body, mono) via `next/font/google`
    3. Sets up CSS variables in your `globals.css`
    4. Applies the typography scale
    5. Makes the fonts available to all components
  </Accordion>
</AccordionGroup>

## Customization

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

<Accordion title="Can I mix fonts from different pairings?">
    Absolutely! You can install multiple pairings and then customize the CSS variables to mix and match:

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

```css theme={null}
    :root {
      --font-heading: var(--font-playfair-display); /* from Editorial */
      --font-body: var(--font-inter);               /* from Minimal */
      --font-mono: var(--font-jetbrains-mono);      /* from Editorial */
    }
    ```
  </Accordion>

<Accordion title="How do I use the fonts in my components?">
    After installation, use the CSS variables in your 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)]">
      Your code
    </code>
    ```

Or apply them globally in your CSS:

```css theme={null}
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
    }
    body, p {
      font-family: var(--font-body);
    }
    ```
  </Accordion>

<Accordion title="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:

1. Install the full pairing
    2. Remove the mono font imports from your code
    3. Delete the `--font-mono` CSS variable

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

<Accordion title="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.
  </Accordion>
</AccordionGroup>

## Fonts & Compatibility

<AccordionGroup>
  <Accordion title="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
  </Accordion>

<Accordion title="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.
  </Accordion>

<Accordion title="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.
  </Accordion>

<Accordion title="Can I suggest a new font pairing?">
    Yes! We welcome font pairing suggestions. See the [Contributing Guide](/resources/contributing) for details on how to submit a pairing suggestion.
  </Accordion>

<Accordion title="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
  </Accordion>

<Accordion title="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.
  </Accordion>
</AccordionGroup>

## Usage & Pricing

<AccordionGroup>
  <Accordion title="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!
  </Accordion>

<Accordion title="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](https://github.com/kapishdima/fonttrio)
    * Share it on social media
    * Mention it in your project's credits
  </Accordion>

<Accordion title="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](/resources/contributing) for more details.
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Fonts aren't loading in my project">
    If fonts aren't appearing:

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

<Accordion title="CSS variables are undefined">
    If CSS variables show as undefined:

1. Make sure fonts are imported in your root layout file
    2. Check that CSS variables are defined in `globals.css`
    3. Ensure the import order is correct (fonts before CSS)
    4. Verify you're using the App Router (not Pages Router)
  </Accordion>

<Accordion title="Install command fails">
    If `npx shadcn@latest add` fails:

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

If the issue persists, [open an issue](https://github.com/kapishdima/fonttrio/issues) with the error message.
  </Accordion>

<Accordion title="Fonts look different than the preview">
    If fonts don't match the preview on fonttrio.xyz:

1. Check that you're using the correct font weights
    2. Verify line heights and letter spacing in your CSS
    3. Make sure you haven't overridden the font variables elsewhere
    4. Check browser font rendering settings
  </Accordion>
</AccordionGroup>

## Still Have Questions?

If you didn't find your answer here:

* Check the [Getting Started](/introduction) guide
* Browse the [Contributing Guide](/resources/contributing)
* Open an [issue on GitHub](https://github.com/kapishdima/fonttrio/issues)
* Reach out to [@kapish\_dima](https://x.com/kapish_dima) on X

{pairing.heading}

{pairing.heading}

{pairing.name}

Heading

{/* Overrides default h1 size */} Large Hero Heading

{/* Smaller h2 for cards */} Card Title

{/* 300 instead of default 700 */} Light Heading

{/* Tighter than default */} Compact Heading

{/* Tighter tracking */} Condensed Heading

Fully Custom Heading

Responsive Heading

Adapts to dark mode

Custom Display Heading

Your Heading

Your Heading

` through `

Dashboard

Welcome

Bold Marketing Message

Documentation Title