Unable to use font in @vercel/og image: Error: The "payload" argument must be of type object. Received null
#78571
Answered
by
lancejpollard
lancejpollard
asked this question in
Help
-
SummaryI am getting this error in the terminal when trying to render I logged my fonts in my My import SCRIPT from '~/lib/shared/constants/script'
import { ImageResponse } from '@vercel/og'
import { NextRequest } from 'next/server'
import { fetchGoogleFont } from '~/lib/backend/services/google/fonts'
import BaseView from '~/lib/frontend/components/views/BaseView'
import { OPEN_GRAPH_IMAGE_DIMENSIONS } from '~/lib/shared/constants/image'
import PROVERBS from '~/lib/shared/constants/proverbs.json'
import SCRIPTS from '~/lib/shared/constants/scripts.json'
import TITLES from '~/lib/shared/constants/titles.json'
export const GET = async (
_: NextRequest,
input: { params: Promise<{ system: string }> },
) => {
const params = await input.params
const title = TITLES[params.system]
const proverb = PROVERBS[params.system]
const script = SCRIPTS[params.system]
const latinFontFamily = SCRIPT.code.fonts.modern
const latinFont = await fetchGoogleFont({
family: latinFontFamily,
weight: 700,
})
const scriptFontFamily = SCRIPT[script].fonts.modern
const scriptFont = await fetchGoogleFont({ family: scriptFontFamily })
console.log(latinFontFamily)
console.log(latinFont)
console.log(scriptFontFamily)
console.log(scriptFont)
return new ImageResponse(
(
<BaseView
title={title}
titleFontFamily={latinFontFamily}
description={proverb}
descriptionFontFamily={scriptFontFamily}
/>
),
{
width: 1200 * 2,
height: 630 * 2,
fonts: [
{
name: latinFontFamily,
data: latinFont,
style: 'normal',
weight: 700,
},
{
name: scriptFontFamily,
data: scriptFont,
style: 'normal',
},
],
},
)
}The export default function BaseView({
title,
description,
script = 'code',
titleFontFamily,
descriptionFontFamily,
}: {
title: string
description: string
script?: string
titleFontFamily?: string
descriptionFontFamily?: string
}) {
return (
<div
style={{
fontSize: 60 * 2,
background: 'white',
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 16,
}}
>
<div
style={{
fontFamily: `"${titleFontFamily}"`,
fontWeight: 'bold',
scale: '1 80%',
letterSpacing: '.015rem',
lineHeight: 1.2,
fontSize: 44,
color: '#27272A',
}}
>
{title}
</div>
{description && (
<div
style={{
fontFamily: `"${descriptionFontFamily}"`,
fontSize: 16,
}}
>
{description}
</div>
)}
</div>
)
}Why am I getting that error? How can I fix? If I comment out the The const API_KEY = process.env.GOOGLE_FONTS_API_KEY
const CACHE: Record<string, ArrayBuffer> = {}
export async function fetchGoogleFont({
family,
weight = 400,
}: {
family: string
weight?: number
}) {
const fontFamily = family.replace(/ /g, '+')
const key = `${fontFamily}:${weight}`
const cached = CACHE[key]
if (cached) {
return cached
}
const variant = weight === 400 ? 'regular' : `${weight}`
const url = `https://www.googleapis.com/webfonts/v1/webfonts?key=${API_KEY}&family=${fontFamily}&capability=WOFF2`
const res = await fetch(url)
const json = await res.json()
const fontEntry = json.items.find(item => item.family === family)
// logging `json.items` shows the font data I want... so that's working.
const fontUrl = fontEntry?.files[variant] // WOFF2 link
const fontRes = await fetch(fontUrl)
const fontArrayBuffer = await fontRes.arrayBuffer()
CACHE[key] = fontArrayBuffer
return fontArrayBuffer
}Additional informationOperating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.3.0: Thu Jan 2 20:24:24 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6030
Available memory (MB): 36864
Available CPU cores: 12
Binaries:
Node: 20.10.0
npm: 10.4.0
Yarn: 1.22.19
pnpm: 10.8.1
Relevant Packages:
next: 15.1.3 // There is a newer version (15.3.1) available, upgrade recommended!
eslint-config-next: 15.1.3
react: 19.0.0
react-dom: 19.0.0
typescript: 5.3.3
Next.js Config:
output: N/A
⚠ There is a newer version (15.3.1) available, upgrade recommended!
Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issueNotes
|
Beta Was this translation helpful? Give feedback.
Answered by
lancejpollard
Apr 26, 2025
Replies: 1 comment
-
|
Final util seems to be working now? const API_KEY = process.env.GOOGLE_FONTS_API_KEY
const CACHE = new Map<string, ArrayBuffer>()
export async function fetchGoogleFont({
family,
weight = 400,
}: {
family: string
weight?: number
}) {
const fontFamily = family.replace(/ /g, '+')
const key = `${fontFamily}:${weight}`
const cached = CACHE.get(key)
if (cached) {
return cached
}
const variant = weight === 400 ? 'regular' : `${weight}`
const url = `https://www.googleapis.com/webfonts/v1/webfonts?key=${API_KEY}&family=${fontFamily}`
const res = await fetch(url)
if (!res.ok) {
throw new Error('Failed to fetch Google Fonts metadata')
}
const json = await res.json()
// Find the font entry
const fontEntry = json.items.find(item => item.family === family)
if (!fontEntry) {
throw new Error(`Font family not found: ${family}`)
}
const fontUrl = fontEntry.files[variant] // WOFF2 link
if (!fontUrl) {
throw new Error(`Font variant not found: ${family} ${variant}`)
}
const fontRes = await fetch(fontUrl)
if (!fontRes.ok) {
throw new Error(`Failed to fetch font file: ${fontUrl}`)
}
const fontArrayBuffer = await fontRes.arrayBuffer()
CACHE.set(key, fontArrayBuffer)
return fontArrayBuffer
} |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
lancejpollard
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Final util seems to be working now?