Next.js Discord

Discord Forum

How can I setup Geist font correctly?

Answered
Broad-snouted Caiman posted this in #help-forum
Open in Discord
Broad-snouted CaimanOP
Hi there! I'm trying to use Vercel's Geist font, but it doesn't seem to be working. I've installed it with 
pnpm add geist
and imported it like this:
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'
// ...
<html className={`${GeistSans.variable} ${GeistMono.variable} font-sans`}>
...

And in tailwind.config.ts:
//...
module.exports = {
  theme: {
    extend:  {
      fontFamily: {
        sans: ['var(--font-geist-sans)'],
        mono: ['var(--font-geist-mono)'],
      },
// ...

When I inspect a text on the page, it says that the font family is 
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
.

It doesn't show Geist in there. What am I doing wrong? Thanks a lot!
Answered by Broad-snouted Caiman
I deleted the .js one and it worked
View full answer

6 Replies

Broad-snouted CaimanOP
For some reason, there were 2 tailwind files, one .ts and other .js. I don't know why the .js one was created. @Greek Harehound
Broad-snouted CaimanOP
I deleted the .js one and it worked
Answer
It automatically generates tailwind.config.js, so it probably conflict with your tailwind config
@Greek Harehound Do you use shadcn/ui ?
Broad-snouted CaimanOP
Yeah, I do use shadcn/ui. So that's where it came from, thanks for sharing!