Google font not working in ImageResponse
Answered
Prairie yellowjacket posted this in #help-forum
Prairie yellowjacketOP
I'm attempting to change the default font for a response that's wrapped in
ImageResponse (from next/og). When I render the component outside of ImageResponse the font is loaded properly but when I place the ImageResponse around the component, the font returns to the default font.Answered by joulev
you have to explicitly fetch the font then use it in the
fonts array4 Replies
Prairie yellowjacketOP
Hi folks, are there any thoughts on this custom font bug? ðŸ™
@Prairie yellowjacket I'm attempting to change the default font for a response that's wrapped in `ImageResponse` (from `next/og`). When I render the component outside of `ImageResponse` the font is loaded properly but when I place the `ImageResponse` around the component, the font returns to the default font.
you have to explicitly fetch the font then use it in the
fonts arrayAnswer
const font = await fetch(".../font.ttf")
.then(r => r.arrayBuffer());
return new ImageResponse(
<div>Hello, world</div>,
{
fonts: [{
name: "your font",
data: font,
}]
},
)