[Vercel OG] Missing kerning when using custom font

[mwskwong]

Bug report

Description / Observed Behavior

If the image generated by @vercel/og contains texts, those texts will not have the kerning correctly applied when using a custom font.

Expected Behavior

Kerning is applied.

Reproduction

Unable to demonstrate with https://og-playground.vercel.app, so I created a Next.js repo instead:

HTML: https://vercel-og-kerning.vercel.app/
OG: https://vercel-og-kerning.vercel.app/api/og
Repo: https://github.com/mwskwong/vercel-og-kerning

[pixelass]

I am experiencing a similar issue where the line-height is different, but it seems to happen more on some fonts than on others. I'm not sure if this is related but it sounds like it could since it is related to the spacing of letters. I notice greater issues with irregular fonts.

While creating the comparison images I also noticed that ligatures don't seem to be rendered correctly (see last example "Henny Penny" which uses ligatures on some repeating letters "ee" "ff" "oo"...)

HTML uses Next/font (google-fonts)

export const montserrat = createMontserrat({
  weight: ["900"],
  subsets: ["latin"],
});

Satori uses TTF downloaded from google-fonts

const montserrat = await fetch(
  new URL("../../../ions/assets/Montserrat/Montserrat-Black.ttf", import.meta.url)
).then(response => response.arrayBuffer());

I explicitly set several values trying to ensure consistent rendering:

const style = {
  fontWeight: "400",
  fontSize: "20px,
  fontFamily: "Montserrat",
  fontStyle: "normal",
  lineHeight: "1.5",
  letterSpacing: "0",
}

There are cases where the line-height is a higher and some where it's lower

HTML	Satori

HTML	Satori

HTML	Satori