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

Custom fonts not rendered correctly #577

Closed
pixelass opened this issue Nov 28, 2023 · 1 comment
Closed

Custom fonts not rendered correctly #577

pixelass opened this issue Nov 28, 2023 · 1 comment

Comments

@pixelass
Copy link

pixelass commented Nov 28, 2023 •
edited
Loading

Bug report

Description / Observed Behavior

When rendering a custom font, several issues occur (also see #413 #215).
Typefaces that use ligatures or intensive kerning demonstrate this issue very well (see example below)
It seems like certain information of the ttf are simply ignored by Satori, making Satori extremely unreliable when custom fonts are used.

Expected Behavior

I expect satori to render google fonts (from ttf imports) exactly as they are rendered via next/font/google

Reproduction

Please visit https://satori-bug.vercel.app/
Please check the source code here: https://github.com/pixelass/satori-bug

What we see in the image below:

  • line-height is incorrect (most likely a kerning issue)
  • ligatures do not work
  • kerning does not work

Left: HTML/CSS | Right: Satori
image

Additional Context

"@vercel/og": "^0.5.20",
"next": "14.0.3",
tonsky added a commit to tonsky/satori that referenced this issue Mar 6, 2024
@tonsky
Correctly position font baseline and line-height vercel#577
61c0ede
@tonsky tonsky mentioned this issue Mar 6, 2024
Merged
shuding pushed a commit that referenced this issue Jun 2, 2024
@tonsky
Correctly position font baseline and line-height (#599)
d1dfcce 
This patch changes logic how baseline and line-height are calculated, to
match what browsers do and
tools like Figma.

This is especially noticeable on font IBM Plex Sans due to how its
metrics are set up. It was less noticeable on Inter, because previous
calculations somehow arrived at almost correct numbers.

Implementation notes:

- `useOS2Table` is removed, because it’s not what browsers/Figma seem to
be using
- yMax, yMin are not used in text positioning at all
- lineHeight is calculated before as a fraction of fontSize, so height
just recalculates it back

Before:

![Screenshot 2024-03-06 at 19 12
12](https://github.com/vercel/satori/assets/285292/dbe5cacf-4839-4d3b-9c9d-cabd8eb189eb)

After:

![Screenshot 2024-03-06 at 19 12
35](https://github.com/vercel/satori/assets/285292/467012bb-16cc-45e5-bc7e-34cc9e59f2fb)

Background blue/orange text is a static PNG rendered with Figma, black
text is rendered with Satori.

Should solve #577

References:
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

![Screenshot 2024-03-06 at 19 22
47](https://github.com/vercel/satori/assets/285292/3215bc2f-8bee-4785-a30e-2868255bc63b)

And https://www.figma.com/blog/line-height-changes/:

![Screenshot 2024-03-06 at 19 27
16](https://github.com/vercel/satori/assets/285292/92aa7800-74cd-4e08-a167-e3e34ac02abf)

Background image (if needed):


https://github.com/vercel/satori/assets/285292/3c8d6a75-cdca-4774-b285-7bd64bae51ee
@shuding
Copy link
Member

shuding commented Jun 2, 2024

Fixed by #599.

@shuding shuding closed this as completed Jun 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pixelass @shuding