search

vercel / geist-font

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

Inconsistent font variables #56

Open taep96 opened 8 months ago

taep96 commented 8 months ago

Font Name (Geist Sans/Geist Mono):

Description of the Issue: Should GeistMono variable include fallback fonts (ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace) when GeistSans doesn't? When using with tailwindcss as told in the next/font docs it'll also add fallback fonts and there will be duplicates.

Steps to Reproduce: In layout.tsx:

import { GeistMono } from "geist/font/mono";
import { GeistSans } from "geist/font/sans";

// ...
<body className={cn(GeistSans.variable, GeistMono.variable)}>

In tailwind.config.ts:

import { fontFamily } from "tailwindcss/defaultTheme";

// ...
fontFamily: {
  sans: ["var(--font-geist-sans)", ...fontFamily.sans],
  mono: ["var(--font-geist-mono)", ...fontFamily.mono],
},

Expected Behavior: No ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace in the GeistMono variable.

Screenshots: image

Environment (please complete the following information):

mwskwong commented 7 months ago

This is intended. Notice the __GeistMono_Fallback_<hash> is missing? It is because adjustFontFallback is being explicitly disabled, as the only possible values are either Arial or Times New Roman, which both act poorly as the fallback font for a monospace font.

With this in mind, that means Geist Mono has no fallback font. That's where the ui-monospace... comes in, which is a common monospace font fallback stack.

taep96 commented 7 months ago

I see. Before next/font docs said to put the variable and spread the default fonts after when using with tailwind but seems like they don't now. Seems like it'll be fine to not do that with GeistMono but __GeistSans_Fallback_<hash> seems to be just Arial even though it still has fallback that just never makes it into the end css: https://github.com/vercel/geist-font/blob/e0313dd970573674d753cee3192cb38b3ae92d75/packages/next/dist/font.js#L52-L65 Not sure how good of an idea this is but maybe let the user disable the default fallback?