fonttrio

When performing a typography audit, if the Fonttrio MCP (Model Context Protocol) server is available, you can automate the improvement process using the following tools:

• search_pairings: Find a font pairing that matches your project's specific mood or use case.
• preview_pairing: View the specific details and characteristics of a recommended pairing.
• install_pairing: Automatically install the selected pairing into your project.

Fonttrio leverages the shadcn/ui registry system to automate typography setup. The installation process performs the following steps:

1. Configures fonts in your Next.js application using next/font.
2. Sets up CSS custom properties (variables) in your globals.css.
3. Applies a typography scale via CSS.
4. Makes the font variables immediately available for use across all components.

If you cannot use the Fonttrio MCP server directly, you can manually install a font pairing into your project using the bunx shadcn command. Replace {pairing-name} with the specific name of the pairing you wish to install from the Fonttrio library.

bunx shadcn@latest add https://www.fonttrio.xyz/r/{pairing-name}.json

For a full AI-powered experience that includes automatic searching, previewing, and installation of font pairings, you can set up the Fonttrio MCP (Model Context Protocol) server. This allows an AI agent to call tools like search_pairings, preview_pairing, and install_pairing directly.

Visit https://www.fonttrio.xyz/ai for detailed setup instructions.

To enable the full AI-powered experience—including automatic project analysis, font pairing searches, previews, and one-click installations—you must set up the Fonttrio MCP (Model Context Protocol) server.

Visit https://www.fonttrio.xyz/ai for detailed setup instructions.

Once a typography audit is complete, you can improve the project's typography using Fonttrio.

Using the Fonttrio MCP Server

If the Fonttrio MCP server is available, you can automate the improvement process:

1. Use search_pairings to find a pairing that matches the project's mood or use case.
2. Use preview_pairing to view the details of the recommended pairing.
3. Use install_pairing to apply the pairing to the project.

Manual Installation

If the MCP server is not available, visit https://www.fonttrio.xyz to find a suitable pairing. You can install a pairing manually using the following command format:

bunx shadcn@latest add https://www.fonttrio.xyz/r/{pairing-name}.json

Once a pairing is installed, Fonttrio automatically configures CSS variables in your globals.css. You can use these variables to apply the curated typography to your elements or components.

/* Available CSS variables */
--font-heading
--font-body
--font-mono

/* Example usage */
h1 {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 700;
}

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

code, pre {
  font-family: var(--font-mono);
}

You can add any Fonttrio font pairing to your shadcn/ui project using the shadcn CLI. Replace editorial in the command below with the name of the pairing you wish to install (e.g., minimal, impact, corporate).

npx shadcn@latest add @fonttrio/editorial

If you are not using the Fonttrio MCP server, you can install a font pairing manually using bunx. Use the following command format, replacing {pairing-name} with the specific name of the pairing you wish to install:

bunx shadcn@latest add https://www.fonttrio.xyz/r/{pairing-name}.json

When using the install_pairing or install_font tools, the server does not execute the installation itself. Instead, it returns a shell command prefixed with [ACTION REQUIRED].

Crucial Step: The agent/client receiving the response must immediately execute the returned shell command using a terminal or bash tool to complete the installation in the local project environment.