next.js: [NEXT-1089] Custom fonts in `ImageResponse` not working in App Dir

Yeah, using the exact example in the doc in the latest/canary Next.js version will still fail with the above error. https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx

@huozhi Turns out it doesn’t work when there’s a dynamic data fetch. (I’ve updated my reproduction)

export default async function og() {
   const res = await fetch("https://jsonplaceholder.typicode.com/todos/1", {
     cache: "no-store",
   });

And this workaround no longer works as well.

Edit Interestingly, if I load the font with a function, then it works, i.e.

const getInterSemiBold = async () => {
 const response = await fetch(
    new URL('./Inter-SemiBold.ttf', import.meta.url)
  );
  const interSemiBold = await response.arrayBuffer();

  return interSemiBold;
}

// ...
new ImageResponse(
  <OgImage />,
  {
    fonts: [
      {
        name: 'Inter',
        data: await getInterSemiBold(),
        style: 'normal',
        weight: 400,
      },
    ],
  }
)

I can repro this on latest canary (13.3.1-canary.11) as well, will let the team know!

Yeah can repro that, we take a look.

I’m having the same issue; as a workaround, you can do this: Put your font in /public/fonts/here.tff

async function getFont(): Promise<Buffer> {
  const url = process.env.APP_URL
  return new Promise((resolve, reject) => {
    http.get(`${url}/fonts/Font.ttf`, (res) => {
      const chunks: any[] = []
      res.on('data', c => chunks.push(c))
      res.on('end', () =>
        resolve(Buffer.concat(chunks))
      )
    }).on('error', (err) => {
      reject(err)
    })
  })
}

fonts: [
{
  data: await getFont()
}
]

This is pretty hacky, it would be nice if we could use next/font w/ ImageResponse

Confirmed, got it working with:

• edge function
• function in global scope const getFont = async () => { const res = await fetch( new URL('@/fonts/Inter/static/Inter-SemiBold.ttf', import.meta.url) ); return await res.arrayBuffer(); };
• not in public directory

@huozhi Turns out it doesn’t work when there’s a dynamic data fetch. (I’ve updated my reproduction)

export default async function og() {
   const res = await fetch("https://jsonplaceholder.typicode.com/todos/1", {
     cache: "no-store",
   });

@lukadev-0 Can you try the latest canary it resolves the deployment issue for me

Also had this same issue