Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inconsistent font variables #56

Open
1 of 2 tasks
taep96 opened this issue Nov 10, 2023 · 2 comments
Open
1 of 2 tasks

Inconsistent font variables #56

taep96 opened this issue Nov 10, 2023 · 2 comments
Labels
bug Something isn't working where: package The issue corresponds to the distribution package

Comments

@taep96
Copy link

taep96 commented Nov 10, 2023

Font Name (Geist Sans/Geist Mono):

  • 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):

  • OS: Linux
  • Version of the Font: 1.1.0
@taep96 taep96 added the bug Something isn't working label Nov 10, 2023
@mwskwong
Copy link

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
Copy link
Author

taep96 commented Nov 14, 2023

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:

geist-font/packages/next/dist/font.js

Lines 52 to 65 in e0313dd

fallback: [
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Inter",
"Segoe UI",
"Roboto",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
],

Not sure how good of an idea this is but maybe let the user disable the default fallback?

@guidoferreyra guidoferreyra added the where: package The issue corresponds to the distribution package label Mar 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working where: package The issue corresponds to the distribution package
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@guidoferreyra @mwskwong @taep96