search

vercel / geist-font

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

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

Closed spacecat closed 5 months ago

spacecat commented 7 months ago

Font Name (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.

image

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:

image

Firefox:

image

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

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:

image

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

diegohaz commented 7 months ago

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 commented 6 months ago

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 commented 5 months ago

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