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

# Frequently Asked Questions

> 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