Custom Fonts Causing Fetch Errors in Next.js OG Image Generation

[KomoriDev]

Hi everyone, I'm encountering issues when trying to integrate custom fonts using @vercel/og for dynamic image generation in Next.js. The implementation works with local fonts in development but fails after building, showing TypeError: fetch failed errors.

 ⨯ TypeError: fetch failed
    at tT (D:\starify-next\.next\server\pages\api\starify.js:13:56049)
    at async e6 (D:\starify-next\.next\server\pages\api\starify.js:13:29188) {
  [cause]: [Error: not implemented... yet...]
}
 ⨯ TypeError: fetch failed
    at tT (D:\starify-next\.next\server\pages\api\starify.js:13:56049)
    at async e6 (D:\starify-next\.next\server\pages\api\starify.js:13:29188) {
  [cause]: [Error: not implemented... yet...]

This code is borrowed from vercel/examples, but I can't seem to get it to work

export default async function handler(req: NextRequest) {
  /* Omitted here */

  const fontData = fetch(
    new URL('../../assets/fonts/OpenSans-SemiBold.ttf', import.meta.url),
  ).then((res) => res.arrayBuffer());

  return new ImageResponse(
    (
      <main>...</main>
    ),
    {
      width: totalWidth,
      height: 96,
      fonts: [
        {
          name: 'OpenSans',
          data: await fontData,
          weight: 600,
          style: 'normal',
        },
      ],
    }
  )
}

Here is my dependencies information, and my node version is v22.13.1

dependencies:
@vercel/og 0.6.5
next 15.1.7
react 19.0.0
react-dom 19.0.0

devDependencies:
@eslint/eslintrc 3.2.0
@types/node 22.13.1
@types/react 19.0.8
@types/react-dom 19.0.3
eslint 9.20.1
eslint-config-next 15.1.7
turbo 2.4.1
typescript 5.7.3

Any insights would be greatly appreciated! 🙏