Variable font weight scales are incorrect.

[vijaywargiya]

Font Name (Geist Sans/Geist Mono):

• [x] Geist Sans
• [x] Geist Mono

Description of the Issue: Variable font weight scales are incorrect. Font loads up as bold when font-weight is normal.

Steps to Reproduce:

1. Use @font-face to set up any of the variable font files. GeistVF.ttf / GeistVF.woff2 / GeistMonoVF.woff2 / GeistMonoVF.ttf

   @font-face {
   font-family: "Geist";
   src: url("../fonts/GeistVF.ttf");
   }

2. Setup font with tailwind

   theme: {
     extend: {
         fontFamily: {
             geist: ["Geist"],

3. Use for an element. className={"font-geist"}

Expected Behavior: Font should respect font-weight and rendered accordingly.

Screenshots:

Environment:

• OS: MacOS
• Software: React + Tailwind
• Version of the Font: 1.0

[kasem-sm]

+1

[atsixian]

Looks like the weight names are also incorrect. Regular is thinner than UltraLight and Light.

[Mrahmani71]

Same problem

[mwskwong]

I wonder if this is related to when using this font in a Word document and exporting it to PDF, all the text will appear super thin despite only medium and bold being used for the entire document and Adobe Reader suggests both weights of the fonts are embedded.

[didier]

Geist is unfortunately unusable in its current state.

[ivanjeremic]

I installed the font and try to use it inside vscode but adding setting in setting "Geist Mono" does nothing it falls back to default font, any idea why?

[kenmcd]

The design coordinates are being used as the instance weights in the variable fonts. So the variable fonts are not going to work until that is fixed.

The static fonts should work. Their weight settings are correct (with the exception of UltraBlack).

[cristiancoppari]

Same problem here. I installed the font in VSCode. If I use the font with 400 of weight, it looks very thin. If I set the font weight to 500 its a bit bold, but usable.

[JohnPhamous]

Fixed in #46 and available in the 1.0.1 release on GitHub and on npm.

[chungweileong94]

Fixed in #46 and available in the 1.0.1 release on GitHub and on npm.

@JohnPhamous Unfortunately, the issue doesn't seem to be fixed.

[JohnPhamous]

Fixed in #46 and available in the 1.0.1 release on GitHub and on npm.

@JohnPhamous Unfortunately, the issue doesn't seem to be fixed.

How can I repro your setup? The weight axis was remapped from 100-900.

[chungweileong94]

Fixed in #46 and available in the 1.0.1 release on GitHub and on npm.

@JohnPhamous Unfortunately, the issue doesn't seem to be fixed.

How can I repro your setup? The weight axis was remapped from 100-900.

I basically just install the font via Homebrew, then inspect the variable font in fontbook on MacOS.

[kpollich]

I downloaded the 1.0.1 release of Geist Mono from the releases tab on GitHub, and installed via Font Book on macOS. The font is incredibly thin by default in VS Code:

I'm using the Geist Mono Variable font family included in the .zip archive for the 1.0.1 release.

Here's the same chunk of code in JetBrains Mono:

Weirdly, the font seems to render at the expected weight in iTerm. e.g. here's the same code chunk side by side in Vim/iTerm and VS Code:

[kpollich]

I wound up just installing all of the .otf fonts individually and using Geist Mono instead of Geist Mono Variable and that renders at the expected weight 🤷

[psugihara]

I also had to go back to 1.0.0 and the old way of importing import { GeistSans, GeistMono } from "geist/font"; to make weights work correctly on my site. Does this add to the bundle size?

FWIW I was installing with yarn (which uses the version 1.1.0) and using the new import syntax in an app router + tailwind-based next app.

[chengluyu]

Hello everyone! I’ve found a solution to fix this issue (refer to #68). Since the team of Geist font hasn’t responded yet, I’ve created a release in my own fork. Feel free to give it a try!

[vinhphm]

The issue still persists in the variable fonts. I think this shouldn't be marked as Closed.

[JohnPhamous]

We are updating the variable font. We will create a new release soon.

[guidoferreyra]

This should be fixed on the latest release https://github.com/vercel/geist-font/releases/tag/1.3.0

A note for the people using the variable fonts on web, when defining the @font-face rule don’t forget to define the font-weight as a range:

eg.

@font-face {
  font-family: "Geist";
  src: url("path/to/font/file/GeistVF.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;  
}