Custom Font files not loaded on Vercel Edge Function
jonashaefele opened this issue · comments
Bug report
Description / Observed Behavior
I'm using the Documentation at
https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-examples#using-a-custom-font
and
https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-api
I'm trying to create OG images using a custom font.
When loading a custom font, it works just fine in local development, but fails when deploying to Vercel.
The edge function errors out with Fetch API cannot load: blob:Fontfilename.68a75c1840dfdca9.otf
It seems to find the file on build, as it's crated a blob with a hash in the name, but it fails to load the font at runtime.
I tried many different versions including the app router (as in docs), the page router (as in the example repo and docs) and searched through issues here and on Stackoverflow.
Expected Behavior
I expect the example code from the example repo and the docs to run both locally with next dev as well as deploy to Vercel and correctly load the font before rendering the image.
Reproduction
Create a new deployment of the example app at https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs
Deploy to Vercel.
Access /api/custom font
See 500 error trying to import font blob.
Additional Context
All the latest versions of next, vercel/og, satori.
Rendering without custom fonts (or any imported asset) runs fine. Adding custom font leads to 500 error.