Variable font in vercel og

Question

How to load a variable font such as Geist[wght].ttf in vervel og?I am trying to load is like this:fonts: [
    {
        name: 'Geist',
        data: await fetch(
            new URL(`${origin}/GeistMono[wght].ttf`)
        ).then(res => res.arrayBuffer()),
        weight: 800,  // Base weight
        style: 'normal',
    }
]but getting this error:Error: failed to pipe response
    at ignore-listed frames {
  [cause]: TypeError: Cannot read properties of undefined (reading '256')
      at ignore-listed frames
}
 GET /api/og?username=meow 500 in 70ms (compile: 1714µs, render: 68ms)

Western paper wasp · Answer

@vercel/og/Satori often can’t parse variable TTFs (like GeistMono[wght].ttf) — it expects a static font file. Export/download a static Geist/GeistMono (e.g. GeistMono-Regular.ttf / GeistMono-Bold.ttf) and use that in fonts.Also make sure the fetch actually succeeds:const res = await fetch(new URL("/GeistMono-Bold.ttf", origin));

if (!res.ok) throw new Error('Font fetch failed: ${res.status}');

const data = await res.arrayBuffer();Vercel OG / Fontshttps://vercel.com/docs/functions/edge-functions/og-image-generation#fontsDiscussion of variable fontshttps://github.com/vercel/satori/issues/530

Variable font in vercel og

2 Replies