ui icon indicating copy to clipboard operation
ui copied to clipboard

Published 20 hours ago • verified publisher icon shadcn-ui

Change the default font

Open bryanhpchiang opened this issue 2 years ago • 1 comments

Can the default font by changed to Geist Sans?

bryanhpchiang avatar Oct 29 '23 07:10 bryanhpchiang

Try. In your Global.css file you can add @layer base { html { font-family: var(--font-barlow), sans-serif; or @apply font-barlow } } you can apply also it on the body

Josevictor2 avatar Oct 30 '23 12:10 Josevictor2

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

shadcn avatar Feb 13 '24 23:02 shadcn

I have followed instructions from Geist npm and it all worked fine

So:

// layout.tsx
// import your fonts
+ import { GeistSans } from 'geist/font/sans';
+ import { GeistMono } from 'geist/font/mono';

<body className={cn(
  'min-h-screen bg-background antialiased font-mono', // your default app font
// add variables  
+  GeistMono.variable,
+  GeistSans.variable)}
 >
  {children}
</body>

// tailwind.config.js
theme: {
    extend: {
+      fontFamily: {
+        sans: ['var(--font-geist-sans)'],
+        mono: ['var(--font-geist-mono)'],
      },
    },
  },

Then on any component you should be able to add: font-mono OR font-sans to use Geist Font

T04435 avatar May 11 '24 08:05 T04435