"Fonttrio, a new open-source font pairing registry built specifically for shadcn/ui projects, has launched with 49 curated font combinations that can be installed with a single CLI command. Created by developer Dima Kapish, the tool aims to eliminate the time-consuming process of selecting, pairing, and configuring fonts for web applications built on the popular component framework."
"The tool leverages the registry:font type introduced in shadcn CLI v4, allowing developers to install a complete typography system, including heading, body, and monospace fonts, along with CSS variables and a full typography scale, through one command: npx shadcn@latest add <https://www.fonttrio.xyz/r/editorial.json>"
"Once installed, fonts are configured via next/font in Next.js applications, CSS custom properties are set up in globals.css, and a typography scale covering h1 through body text is applied automatically. The generated CSS variables follow a straightforward pattern: --font-heading --font-body --font-mono"
"One Instagram creator highlighted a broader concern within the community around shadcn: The shadcn-ification of apps is becoming a real problem. Everything is starting to look the same. Same components. Same layouts. Same vibe. They acknowledged typography as an area to help break this and specifically called out Fonttrio."
Fonttrio is an open-source font pairing registry built for shadcn/ui projects, launched with 49 curated font combinations. Fonts can be installed with a single CLI command using the registry:font type introduced in shadcn CLI v4. Installation applies a complete typography system that includes heading, body, and monospace fonts, along with CSS variables and a full typography scale. In Next.js, configuration is handled through next/font, while globals.css receives CSS custom properties. The generated variables follow a simple pattern for heading, body, and mono fonts. The tool aims to reduce the time spent selecting, pairing, and configuring fonts, and it positions typography customization as a way to avoid uniform-looking shadcn-ified apps.
Read at InfoQ
Unable to calculate read time
Collection
[
|
...
]