Inconsistencies in Safari Version 17.1 (19616.2.9.11.7) for weights 600, 700, 800 and 900

[spacecat]

Font Name (Geist Sans/Geist Mono):

• Geist Sans
• Geist Mono

Description of the Issue:
Please provide a clear and concise description of the issue.
Inconsistencies in Safari Version 17.1 (19616.2.9.11.7) for weights 600, 700, 800 and 900 compared to other browsers.

Steps to Reproduce:

1. Add the following markup to a page in your Next.js app:

<div>
        <p className="font-thin">The quick brown fox jumps over the lazy dog</p>
        <p className="font-extralight">The quick brown fox jumps over the lazy dog</p>
        <p className="font-light">The quick brown fox jumps over the lazy dog</p>
        <p className="font-normal">The quick brown fox jumps over the lazy dog</p>
        <p className="font-medium">The quick brown fox jumps over the lazy dog</p>
        <p className="font-semibold">The quick brown fox jumps over the lazy dog</p>
        <p className="font-bold">The quick brown fox jumps over the lazy dog</p>
        <p className="font-extrabold">The quick brown fox jumps over the lazy dog</p>
        <p className="font-black">The quick brown fox jumps over the lazy dog</p>
      </div>

2. Compare the page in different browsers.

Expected Behavior:
A clear and concise description of what you expected to happen.
I expect all the font weight to be consistent. The result should look like this:

Chrome:

Firefox:

Edge:
Sorry, I'm on a Mac at the moment so can't take screenshot.

Screenshots:
If applicable, add screenshots to help explain your problem.
See above.

Environment (please complete the following information):

• OS: [e.g. Windows, MacOS, Linux]
  MacBook Pro, 13-inch, M1, 2020
  macOS 14.1.1 (23B81)

• Software: [e.g. Adobe Illustrator, Microsoft Word]
  Safari Web Browser.

• Version of the Font: [e.g. 1.0]
  "geist": "1.1.0",

Additional Context:
Add any other context about the problem here.

I've been reading about the difference browser rendering inconsistencies but then tested with Inter font which is quite popular and that one looks OK in Safari. Screenshot in Safari:

Inter looks equally good in Firefox and Chrome on my Mac.

[diegohaz]

Yes, and it's not just with Safari 17. I've also tested it on Safari 16 and 15, and the same issue occurs.

Edit: This is a problem when importing from geist/font/sans, which uses the variable font. Importing from the deprecated geist/font path doesn't produce this issue.

Edit 2: found another fix — apply font-synthesis-weight: none to html, body in CSS.

[spacecat]

Any progress on this?
Working on a new project and I would love to use this font. I use all different font weights quite frequently and I'm not a big fan of work arounds 🙂

[JohnPhamous]

Thanks for reporting the issue! We've fixed the problem in #77. It's available in version 0.2.1.