I'm struggling with the same issues. As soon as I add a custom font, deploying to Vercel leads to an error accessing the font data from the buffer. I get a slightly different error Fetch API cannot load: blob:AT-NameSansDisplay-Medium.68a75c1840dfdca9.otf It doesn't seem to make a difference if I use WOFF or OTF font files either.

@American @Filipino Venus Did any of you guys manage to fix this or work around it? I've spent some hours and still can't get it done

I didn't find a solution, sorry 😩 just removed that part of the code

;<

Firstly try using the complete path (without public) inside that URL. dont use import.meta.url either

Same issue

TypeError: Invalid URL
    at new URL (node:internal/url:775:36)
    at Image (webpack-internal:///(app-metadata-route)/./app/opengraph-image.tsx:17:5)
    at GET (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/build/webpack/loaders/next-metadata-route-loader.js?page=%2Fopengraph-image%2F%5B%5B...__metadata_id__%5D%5D%2Froute&isDynamic=1!./app/opengraph-image.tsx?__next_metadata_route__:43:10)
    at /home/nicu/repos/web/trainsync/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63257
    at /home/nicu/repos/web/trainsync/node_modules/next/dist/server/lib/trace/tracer.js:133:36
    at NoopContextManager.with (/home/nicu/repos/web/trainsync/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/nicu/repos/web/trainsync/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NoopTracer.startActiveSpan (/home/nicu/repos/web/trainsync/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18093)
    at ProxyTracer.startActiveSpan (/home/nicu/repos/web/trainsync/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18854)
    at /home/nicu/repos/web/trainsync/node_modules/next/dist/server/lib/trace/tracer.js:122:103
    at NoopContextManager.with (/home/nicu/repos/web/trainsync/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/nicu/repos/web/trainsync/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NextTracerImpl.trace (/home/nicu/repos/web/trainsync/node_modules/next/dist/server/lib/trace/tracer.js:122:28)
    at /home/nicu/repos/web/trainsync/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:56774
    at AsyncLocalStorage.run (node:async_hooks:346:14) {
  code: 'ERR_INVALID_URL',
  input: '/fonts/Geist-Bold.ttf'
}

Whats the URL you used?

const fontData = await fetch(new URL("/fonts/Geist-Bold.ttf")).then((res) =>
res.arrayBuffer()
);

I meant the complete url

With localhost included.

http://localhost:3000/fonts/Geist-Bold.ttf like this?

smh this worked

but ill have to switch for the domain in production right?

Which is why i assumed metadataBase should have worked.

same but it does not apparently

Did you try metadabase without the import.meta thing?

yeah

export const metadata: Metadata = {
  metadataBase: new URL("http://localhost:3000"),
};
  const fontData = await fetch(new URL("/fonts/Geist-Bold.ttf")).then((res) =>
    res.arrayBuffer()
  );

this doesnt work for some reason

Maybe it doesn't for og images ig since they aren't a page.

could be, i will test it in production. Thank you

Another example of mine that works, this time in a route https://github.com/leonlarsson/friendly-time/blob/main/app%2Fog%2Froute.tsx

Hope it's of any help

  const regularFontUrl = new URL("../../public/fonts/Inter-Regular.ttf", import.meta.url);

i've tried exactly this in /api/og and it did not work. its probably because of the newer next or og versions I dont know

thanks a lot regardless