Next.js Discord

Discord Forum

Importing fonts with ImageResponse from vercel/og doesnt work. While 3 weeks ago this was ok

Answered
Atlantic herring posted this in #help-forum
Open in Discord
Atlantic herringOP
I get two errors in vercel logs

1. 
GET] /api/img/most-played?objectId=224517&count=2&startDate=Dec%201%202023&game=Brass%3A%20Birmingham&endDate=Dec%2020%202023 reason=EDGE_FUNCTION_INVOCATION_FAILED, status=500, user_error=true


2. 
TypeError: Fetch API cannot load: blob:Rubik-Bold.1de274cee83abeea.ttf
    at (pages/api/img/most-played.tsx:19:17)
    at (pages/api/img/most-played.tsx:163:22)
    at (node_modules/next/dist/esm/server/web/adapter.js:157:15)


#2 is the one Ive been trying to fix:
3 Weeks ago, this was working for me on vercel deployment. It started breaking today when I tested.
I have done all the suggested solutions in the link here: https://github.com/vercel/next.js/issues/48081

Have done:
* Importing font from public folder
* Importing font from /fonts folder - /fonts/font.ttf
* Importing font from /fonts folder - ../../../fonts/font.ttf
* Fetching it in a separate function and awaiting for ArrayBuffer
* Fetching it and using the Array buffer directly to the fonts array

Also, all of these changes work on local, just not when deployed to vercel
Answered by Atlantic herring
they fixed it! it works now
Thanks vercel 😍
View full answer

6 Replies

Atlantic herringOP
wow even the default font cannot be used in vercel

TypeError: Fetch API cannot load: blob:noto-sans-v27-latin-regular.5dda3fca77107598.ttf


pls help 😦
im using 

"@vercel/og": "^0.5.20",
"next": "^14.0.2",
"react": "^18.2.0",
Bullmastiff
same issue here with next/og
Atlantic herringOP
theyre investigating the outage
https://www.vercel-status.com/
Atlantic herringOP
they fixed it! it works now
Thanks vercel 😍
Answer