search

vercel / geist-font

https://vercel.com/font
SIL Open Font License 1.1
2.13k stars 54 forks source link

Geist font not working with TailwindCSS #82

Closed psiaux closed 5 months ago

psiaux commented 5 months ago

Font Name (Geist Sans/Geist Mono):

Description of the Issue: Geist font is not being applied to the elements. The inspection inside browser's debug tools shows font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";.

Steps to Reproduce:

  1. Install Next.js and TailwindCSS with create-next-app
  2. Import font import { GeistSans } from 'geist/font/sans'
  3. Apply font <html className={``${GeistSans.variable} ${GeistMono.variable} font-sans}``>
  4. Add Geist to TailwindCSS: module.exports = { theme: { extend: { fontFamily: { sans: ['var(--font-geist-sans)'] } } } }

Expected Behavior: It should appear something like font-family: var(--font-geist-sans);on the inspection.

Environment (please complete the following information):

JohnPhamous commented 5 months ago

Can you provide a repo or a codepen? It's very helpful to have the exact versions of everything when debugging these issues.

psiaux commented 5 months ago

I was making a repo for you, but I think I got it working. There were 2 taildwind config files, one .ts and one .js. I don't know why this .js was created. I deleted it and it started working.