Fonttrio Launches as Open-Source Font Pairing Registry for shadcn/ui

Fonttrio Launches as Open-Source Font Pairing Registry for shadcn/ui - InfoQ

[BT](https://www.infoq.com/int/bt/ "bt")

InfoQ Software Architects' Newsletter

A monthly overview of things you need to know as an architect or aspiring architect.

View an example

Enter your e-mail address

Select your country - [x] I consent to InfoQ.com handling my data as explained in this Privacy Notice.

We protect your privacy.

Close

Live Webinar and Q&A: Rethinking AppSec: Why Compiler‑Level Security Changes the Architecture Conversation (Jun 11, 2026)Save Your Seat

Close

Toggle Navigation

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

English edition

• English edition
• Chinese edition
• Japanese edition
• French edition

[Write for InfoQ](https://www.infoq.com/write-for-infoq/ "Write for InfoQ")

Search

RegisterSign in

Unlock the full InfoQ experience

Unlock the full InfoQ experience by logging in! Stay updated with your favorite authors and topics, engage with content, and download exclusive resources.

Log In

or

Don't have an InfoQ account?

Register

• Stay updated on topics and peers that matter to youReceive instant alerts on the latest insights and trends.
• Quickly access free resources for continuous learningMinibooks, videos with transcripts, and training materials.
• Save articles and read at anytimeBookmark articles to read whenever youre ready.

Logo - Back to homepage

NewsArticlesPresentationsPodcastsGuides

Topics

[Development](https://www.infoq.com/development/ "Development")

• [Java](https://www.infoq.com/java/ "Java")
• [Kotlin](https://www.infoq.com/kotlin/ "Kotlin")
• [.Net](https://www.infoq.com/dotnet/ ".Net")
• [C#](https://www.infoq.com/c_sharp/ "C#")
• [Swift](https://www.infoq.com/swift/ "Swift")
• [Go](https://www.infoq.com/golang/ "Go")
• [Rust](https://www.infoq.com/rust/ "Rust")
• [JavaScript](https://www.infoq.com/javascript/ "JavaScript")

Featured in Development

• #### From VR to Flat Screens: Bridging the Input and Immersion Gap

Dany Lepage discusses the architectural journey of porting a hit VR title to seven non-VR platforms. He explains how his team solved the challenges of cross-progression, diverse input paradigms, and maintaining release velocity across Steam, iOS, and PlayStation. Beyond the tech, he shares candid lessons on the "product fit" gap when translating immersive social presence to 2D screens.


All in developmentFollow Topic

[Architecture & Design](https://www.infoq.com/architecture-design/ "Architecture & Design")

• [Architecture](https://www.infoq.com/architecture/ "Architecture")
• [Enterprise Architecture](https://www.infoq.com/enterprise-architecture/ "Enterprise Architecture")
• [Scalability/Performance](https://www.infoq.com/performance-scalability/ "Scalability/Performance")
• [Design](https://www.infoq.com/design/ "Design")
• [Case Studies](https://www.infoq.com/Case_Study/ "Case Studies")
• [Microservices](https://www.infoq.com/microservices/ "Microservices")
• [Service Mesh](https://www.infoq.com/servicemesh/ "Service Mesh")
• [Patterns](https://www.infoq.com/DesignPattern/ "Patterns")
• [Security](https://www.infoq.com/Security/ "Security")

Featured in Architecture & Design

• #### Stripe’s Docdb: How Zero-Downtime Data Movement Powers Trillion-Dollar Payment Processing

Jimmy Morzaria discusses the evolution of Stripe’s database tier to support 5 million QPS with 5.5 nines of reliability. He explains the architecture of DocDB and shares how Stripe leverages a custom zero-downtime data movement platform to perform horizontal sharding, version upgrades, and multi-tenant migrations - all while maintaining the strict consistency required for global commerce.


All in architecture-designFollow Topic

[AI Infrastructure](https://www.infoq.com/ai-ml-data-eng/ "AI Infrastructure")

• [Big Data](https://www.infoq.com/bigdata/ "Big Data")
• [Machine Learning](https://www.infoq.com/machinelearning/ "Machine Learning")
• [NoSQL](https://www.infoq.com/nosql/ "NoSQL")
• [Database](https://www.infoq.com/database/ "Database")
• [Data Analytics](https://www.infoq.com/data-analytics/ "Data Analytics")
• [Streaming](https://www.infoq.com/streaming/ "Streaming")

Featured in AI, ML & Data Engineering

• #### Leadership in AI-Assisted Engineering

Justin Reock discusses the reality of AI’s impact on engineering, moving past anecdotes to hard data from DORA and DX research. He explains the "GenAI Divide" - where 95% of pilots fail - and shares how leaders can use the SPACE and Core 4 frameworks to measure true ROI. He explains how to balance speed with quality, reduce developer fear, and apply agentic solutions across the entire SDLC.


All in ai-ml-data-engFollow Topic

[Culture & Methods](https://www.infoq.com/culture-methods/ "Culture & Methods")

• [Agile](https://www.infoq.com/agile/ "Agile")
• [Diversity](https://www.infoq.com/diversity/ "Diversity")
• [Leadership](https://www.infoq.com/leadership/ "Leadership")
• [Lean/Kanban](https://www.infoq.com/lean/ "Lean/Kanban")
• [Personal Growth](https://www.infoq.com/personal-growth/ "Personal Growth")
• [Scrum](https://www.infoq.com/scrum/ "Scrum")
• [Sociocracy](https://www.infoq.com/sociocracy/ "Sociocracy")
• [Software Craftmanship](https://www.infoq.com/software_craftsmanship/ "Software Craftmanship")
• [Team Collaboration](https://www.infoq.com/team-collaboration/ "Team Collaboration")
• [Testing](https://www.infoq.com/testing/ "Testing")
• [UX](https://www.infoq.com/ux/ "UX")

Featured in Culture & Methods

• #### The AI Joy Gap: Why Some Developers Thrive While Others Struggle

In this podcast, Shane Hastie, Lead Editor for Culture & Methods, spoke to Michael Parker, VP of Engineering at TurinTech AI, about bringing joy back to software development in the AI era, the emerging role of "factory architects" who orchestrate AI agents rather than write code directly, and the cultural divide between AI hype and the reality developers face on legacy codebases.


All in culture-methodsFollow Topic

DevOps

• [Infrastructure](https://www.infoq.com/infrastructure/ "Infrastructure")
• [Continuous Delivery](https://www.infoq.com/continuous_delivery/ "Continuous Delivery")
• [Automation](https://www.infoq.com/automation/ "Automation")
• [Containers](https://www.infoq.com/containers/ "Containers")
• [Cloud](https://www.infoq.com/cloud-computing/ "Cloud")
• [Observability](https://www.infoq.com/observability/ "Observability")

Featured in DevOps

• #### How Netflix Shapes our Fleet for Efficiency and Reliability

The speakers explain the inherent tension between service efficiency and reliability at Netflix's global scale. They share a mental model for "risk-adjusted net value," moving beyond simple CPU utilization to focus on capacity buffers. They discuss hardware shaping, proactive traffic steering, and reactive levers like "hammers" and prioritized load shedding to protect critical playback.


All in devopsFollow Topic

[Events](https://events.infoq.com/ "Events")

Helpful links

• [About InfoQ](https://www.infoq.com/about-infoq "About InfoQ")
• [InfoQ Editors](https://www.infoq.com/infoq-editors "InfoQ Editors")
• [Write for InfoQ](https://www.infoq.com/write-for-infoq "Write for InfoQ")
• [About C4Media](https://c4media.com/ "About C4Media")
• [Diversity](https://c4media.com/diversity "Diversity")

Choose your language

• [En](https://www.infoq.com/news/2026/05/fonttrio-shadcn-fonts/# "InfoQ English")
• 中文
• 日本
• Fr


[InfoQ Homepage](https://www.infoq.com/ "InfoQ Homepage")[News](https://www.infoq.com/news "News")Fonttrio Launches as Open-Source Font Pairing Registry for shadcn/ui

[Web Development](https://www.infoq.com/Web-Development/ "Web Development")

Portable by Design: Data Mobility & Recovery Patterns for Multi-Cloud Systems (Webinar May 21st)

Fonttrio Launches as Open-Source Font Pairing Registry for shadcn/ui

May 09, 2026 2 min read

by

• Daniel Curtis

Follow UI Development Manager at Griffiths Waite

#### Write for InfoQ

Feed your curiosity.Help 550k+ global

senior developers

each month stay ahead.Get in touch

Log in to listen to this article

Loading audio

Your browser does not support the audio element.

0:00 0:00

Normal 1.25x 1.5x

Like

• Reading list

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

The launch attracted immediate attention from the shadcn/ui ecosystem. shadcn, the creator of shadcn/ui, responded on X saying:

This is amazing. Using the registry for font distribution. One click install. Congrats on the launch

The post received nearly 98,000 views and over 1,000 likes.

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 enters a space with established alternatives, though none offer the same level of framework integration. Fontjoy uses machine learning to generate font pairings and offers adjustable contrast sliders, but produces recommendations rather than installable packages. Fontpair provides curated Google Font combinations with visual previews, but also lacks CLI integration. Neither tool generates CSS variables, typography scales, or framework-specific configurations.

For developers looking to adopt Fonttrio in existing shadcn/ui projects, installation requires shadcn CLI v4 or later. The shadcn team also introduced partial preset application in April 2026, allowing developers to selectively apply only fonts from a preset using npx shadcn@latest apply --preset <code> --only font.

The full Fonttrio documentation, including an installation guide and API reference, is available alongside the source code on GitHub, where the project has already accumulated 377 stars at time of writing.

Fonttrio is an open-source project built by Dima Kapish for the shadcn/ui community. It is written primarily in TypeScript and distributed via the shadcn registry system, a mechanism that allows third-party tools and configurations to be shared and installed through the shadcn CLI. The registry approach represents a broader trend in the ecosystem toward composable, community-driven tooling that extends the core framework.

About the Author

#### Daniel Curtis

Daniel Curtis is a UI Development Manager at Griffiths Waite, a software consultancy based in Birmingham, UK. He leads front-end engineering efforts with a strong focus on delivering innovative enterprise solutions using TypeScript across the stack. Daniel is passionate about modern web architecture, developer experience, and the use of AI to both support software delivery and solve real customer problems within products.

Show more Show less

#### This content is in the Web Development topic

Follow Topic

##### Related Topics:

• Development### Development

Followers: 4094

Follow Topic

• Web Development### Web Development

Followers: 955

Follow Topic

• React### React

Followers: 234

Follow Topic

• TypeScript### TypeScript

Followers: 86

Follow Topic

* #### Related Editorial

• ##### React Navigation 8.0 Alpha with Native Bottom Tabs, Reworked TypeScript Inference and History

• ##### TanStack Start Introduces Import Protection to Enforce Server and Client Boundaries

• ##### State of JavaScript 2025: Survey Reveals a Maturing Ecosystem with TypeScript Cementing Dominance

• ##### Warper: Rust Powered React Virtualisation Library

• ##### Shadcn Releases Visual Project Builder

* #### Related Sponsors

• ##### The Case for Real-Time Threat Monitoring and Analysis in Modern Mobile App Security

• ##### Autonomous Production Operations Built on AWS

• ##### Does your AI stack need a session layer? A maturity framework for teams building AI agents

• ##### Gartner® Research: Hype Cycle™ for Cloud Platform Services, 2025

• ##### Why APIs Can’t Trust Clients—and How to Bridge the Gap

• #### Related Sponsor

Test. Protect. Repeat. Guardsquare pairs mobile app testing and protection, delivering max security with zero performance trade-offs. [Request a Quote](https://www.infoq.com/url/f/8b5e2f7a-671c-470e-978b-6be6f37aa09a/).

Related Content

• ##### VoidZero’s Experimental Oxc Angular Compiler with up to 20x Faster Build Performance

Apr 29, 2026

• ##### npmx Reaches Alpha: Community Driven Alternative Browser for the npm Registry

Apr 28, 2026

• ##### React Navigation 8.0 Alpha with Native Bottom Tabs, Reworked TypeScript Inference and History

Apr 23, 2026

• ##### pnpm 11 Release Candidate: ESM Distribution, Supply Chain Defaults and a New Store Format

Apr 21, 2026

• ##### Pretext.js Bypasses DOM Layout Reflow, Enabling Advanced UX Patterns at 120 FPS

Apr 20, 2026

• ##### Effect v4 Beta: Rewritten Runtime, Smaller Bundles and Unified Package System

Apr 18, 2026

• ##### Pulumi Adds Full Bun Runtime Support

Apr 18, 2026

• ##### Cloudflare Launches Code Mode MCP Server to Optimize Token Usage for AI Agents

Apr 16, 2026

• ##### Cloudflare Introduces EmDash: TypeScript CMS Positioned as WordPress Successor

Apr 09, 2026

Related Sponsors

• #### The Rise of Client-Side Risk and the Trust Gap

A global survey by TrendCandy reveals why traditional OS-level defenses fail against rising mobile app threats. Learn how client-side risk, API abuse, AI-generated code, and fast release cycles drive vulnerabilities—and how layered security and app attestation restore trust.

• #### Rethinking AppSec: Why Compiler‑Level Security Changes the Architecture Conversation (Live Webinar Jun 11th) - Save Your Seat

Security bolted on after the build process adds fragility and blind spots. Embedding protection at compile time improves performance and resilience. This session compares wrapper, runtime, and compiler approaches to help you choose where security belongs in your SDLC.

• Sponsored by


**The InfoQ** Newsletter

A round-up of last week’s content on InfoQ sent out every Tuesday. Join a community of over 250,000 senior developers. View an example

Enter your e-mail address

Select your country - [x] I consent to InfoQ.com handling my data as explained in this Privacy Notice.

We protect your privacy.

• Development

• ##### [Attacker Bought 30 WordPress Plugins on Flippa and Backdoored All of Them](https://www.infoq.com/news/2026/05/wordpress-plugins-supply-chain/ "Attacker Bought 30 WordPress Plugins on Flippa and Backdoored All of Them")

• ##### [Cloudflare Introduces Flagship: an Edge-Native Feature Flag Service Built on OpenFeature](https://www.infoq.com/news/2026/05/cloudflare-flagship-openfeature/ "Cloudflare Introduces Flagship: an Edge-Native Feature Flag Service Built on OpenFeature")

• ##### [QCon San Francisco 2026: 12 Tracks Announced](https://www.infoq.com/news/2026/04/qconsf-2026-tracks-announced/ "QCon San Francisco 2026: 12 Tracks Announced")

• Architecture & Design

• ##### [How GitHub Is Securing Agentic Workflows in Modern CI CD Systems](https://www.infoq.com/news/2026/05/github-agentic-workflows/ "How GitHub Is Securing Agentic Workflows in Modern CI CD Systems")

• ##### [OpenAI Introduces Websocket-Based Execution Mode to Reduce Latency in Agentic Workflows](https://www.infoq.com/news/2026/05/openai-websocket-responses-api/ "OpenAI Introduces Websocket-Based Execution Mode to Reduce Latency in Agentic Workflows")

• ##### [LinkedIn Consolidates Hiring Data Pipelines to Power AI Driven Talent Systems](https://www.infoq.com/news/2026/05/linkedin-unified-hiring-platform/ "LinkedIn Consolidates Hiring Data Pipelines to Power AI Driven Talent Systems")

• Culture & Methods

• ##### [The AI Joy Gap: Why Some Developers Thrive While Others Struggle](https://www.infoq.com/podcasts/some-developers-thrive-while-others-struggle/ "The AI Joy Gap: Why Some Developers Thrive While Others Struggle")

• ##### [Applying Best Simple System for Now for Software Design](https://www.infoq.com/news/2026/05/best-simple-system-design/ "Applying Best Simple System for Now for Software Design")

• ##### [The Human Scalability Problem: Why Your Teams Don’t Scale Like Your Code](https://www.infoq.com/presentations/human-scalability/ "The Human Scalability Problem: Why Your Teams Don’t Scale Like Your Code")

• AI, ML & Data Engineering

• ##### [Leadership in AI-Assisted Engineering](https://www.infoq.com/presentations/ai-assisted-engineering/ "Leadership in AI-Assisted Engineering")

• ##### [Engineering at AI Speed: Lessons from the First Agentically Accelerated Software Project](https://www.infoq.com/presentations/engineering-ai/ "Engineering at AI Speed: Lessons from the First Agentically Accelerated Software Project")

• ##### [AI-First Software Delivery: Balancing Innovation with Proven Practices](https://www.infoq.com/presentations/ai-first-practices/ "AI-First Software Delivery: Balancing Innovation with Proven Practices")

• DevOps

• ##### [Cloudflare Launches “Artifacts” Beta, Introducing Git-Like Versioning for AI Agents](https://www.infoq.com/news/2026/05/cloudflare-artifacts-ai-agents/ "Cloudflare Launches “Artifacts” Beta, Introducing Git-Like Versioning for AI Agents")

• ##### [Leading Open Source Author Calls for Verification over Trust in Software Supply Chains](https://www.infoq.com/news/2026/05/stenberg-curl-verification-trust/ "Leading Open Source Author Calls for Verification over Trust in Software Supply Chains")

• ##### [Grafana's Kubernetes Monitoring Helm Chart v4 Brings Multiple Fixes](https://www.infoq.com/news/2026/05/kubernetes-monitoring-helm/ "Grafana's Kubernetes Monitoring Helm Chart v4 Brings Multiple Fixes")

**The InfoQ** Newsletter

A round-up of last week’s content on InfoQ sent out every Tuesday. Join a community of over 250,000 senior developers. View an example

• Get a quick overview of content published on a variety of innovator and early adopter technologies
• Learn what you don’t know that you don’t know
• Stay up to date with the latest information from the topics you are interested in

Enter your e-mail address

Select your country - [x] I consent to InfoQ.com handling my data as explained in this Privacy Notice.

We protect your privacy.

**ONLINE INFOQ CERTIFICATION PROGRAM** A Cohort for Senior Engineers and Architects * **Focused on ARCHITECTURE** with Luca Mezzalira | JUNE 10 * **Focused on AI ENGINEERING** with Hien Luu | JULY 25 Bring a real architecture or AI engineering challenge from your work. Spend 5 weeks pressure-testing your approach with senior peers from other companies and experienced facilitators. Explore the upcoming cohorts. **Register Now.**

#### Events

• ##### QCon AI Boston

June 1-2, 2026

• ##### Online InfoQ Architect Certification

June 10, 2026

• ##### Online InfoQ AI Engineering Certification

July 25, 2026

• ##### QCon San Francisco

November 16-20, 2026

#### Follow us on

Youtube 232K FollowersLinkedin 26K FollowersInstagram NewRSS 19K ReadersX 57.1k FollowersFacebook 21K LikesBluesky New

#### Stay in the know

The InfoQ PodcastEngineering Culture PodcastThe Software Architects' Newsletter

General Feedback [[email protected]](mailto:[email protected]) Advertising [[email protected]](mailto:[email protected]) Editorial [[email protected]](mailto:[email protected]) Marketing [[email protected]](mailto:[email protected])

InfoQ.com and all content copyright © 2006-2026 C4Media Inc.

Privacy Notice, Terms And Conditions, Cookie Policy

Close

[BT](https://www.infoq.com/int/bt/ "bt")