@kapishdima is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@shadcn , I also have this issue in Fonttrio

I’m thinking - what if I make the installation use only fontsource (non-variable fonts)? That should be more stable

Of course, I could add a check for whether the font exists in fontsource/variable, but it feels like that would increase the cognitive load in the code 🙃

Let me take a look. I'll come up with a solution.

@shadcn just ping :DD

I'm checking if the following would be better: a dependency field.

{
  "name": "font-inter",
  "type": "registry:font",
  "font": {
    "family": "'Inter Variable', sans-serif",
    "provider": "google",
    "import": "Inter",
    "variable": "--font-sans",
    "dependency": "@fontsource-variable/inter" // ←
  }
}

{
  "name": "font-lato",
  "type": "registry:font",
  "font": {
    "family": "'Lato', sans-serif",
    "provider": "google",
    "import": "Lato",
    "variable": "--font-sans",
    "weight": ["400", "700"],
    "dependency": "@fontsource/lato" // ←
  }
}

@shadcn Hmm, but what if the user has only fontsource/variable specified in dependency, and the font is installed only from there — but the browser doesn’t support variable fonts? Then a fallback would have to be added manually.

My PR does a few things:

• Installs both fontsource and fontsource/variable
• Adds a @supports block in CSS so both variants are supported
• Fixes the issue in non-Next.js projects where the font-family is used without the Variable suffix, while fontsource/variable imports it with the suffix.

For example, fontsource/variable exports "Fira Code Variable", but the CSS currently uses just "Fira Code".

@shadcn , I thought a lot about something like this. Then registry authors wouldn’t need to worry about whether a font is supported in fontsource:

// ...
const response = await fetch(`https://registry.npmjs.org/@fontsource-variable/{fontName}`);

if(response.ok) {
	tree.css[`@import "${fontSourceVariable}"`] = {}
}
// ...

@shadcn , ping :D

@shadcn, Do you have any solution? Or should I implement a check using a request? Because right now users cannot properly set the font in the TanStack Start application

@kapishdima I wouldn't worry about fallback. Usage is at 97%. https://caniuse.com/variable-fonts

wdyt #10035?

@shadcn , Let’s do it this way then, I’ll pass it on to Fonttrio from my side. Thanks!

@kapishdima Ready to test with npx shadcn@4.0.7-beta.1 let me know.

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
ui	Ignored	Preview	Mar 14, 2026 0:26am

@kapishdima ready when you are.

I’ll go test it

@shadcn , I tested installing a font that doesn’t exist in fontsource/variable - it works fine.

There’s another thing though. I have a registry item like this

{
	"name": "fira-code",
	"type": "registry:font",
	"category": "Monospace",
	"title": "Fira Code",
	"description": "Fira Code — Monospace font.",
	"font": {
		"family": "Fira Code",
		"provider": "google",
		"import": "Fira_Code",
		"variable": "--font-fira-code",
		"weight": ["300", "400", "500", "600", "700"],
		"subsets": [
			"menu",
			"cyrillic",
			"cyrillic-ext",
			"greek",
			"greek-ext",
			"latin",
			"latin-ext",
			"symbols2"
		]
	}
}

where font.family is Fira Code. When installing the font, you use font.family to add a CSS variable like:

--font-fira-code: Fira Code

But the font-family in fontsource/variable is actually "Fira Code Variable".

@font-face {
  font-family: 'Fira Code Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(./files/fira-code-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

I can solve this at the registry-item level by simply setting font.family to Fira Code Variable. But other users might not know about this.

What do you think? Is it better to let users specify the correct font-family themselves, or should this be handled in the CLI?

Yes. That's right. The dependency field gives you explicit control here. Set family to match whatever package you're using:

• "family": "'Fira Code Variable', monospace" with "dependency": "@fontsource-variable/fira-code"
• "family": "'Fira Code', monospace" with "dependency": "@fontsource/fira-code"

It should be deterministic. The CLI shouldn't transform or guess font names. We leave that to the registry author.

@shadcn Alright, everything works then. Thank you so much!