satori: Requiring a variable font causes a type error
Bug report
When satori’s .addFonts method is called, it calls opentype which (in a Next.js app) throws the following error
error - TypeError: Cannot read properties of undefined (reading '259')
at parseFvarAxis (webpack-internal:///(middleware)/./node_modules/@shuding/opentype.js/dist/opentype.module.js:10290:22)
at Object.parseFvarTable [as parse] (webpack-internal:///(middleware)/./node_modules/@shuding/opentype.js/dist/opentype.module.js:10326:13)
at Object.parseBuffer [as parse] (webpack-internal:///(middleware)/./node_modules/@shuding/opentype.js/dist/opentype.module.js:11618:33)
at vt.addFonts (webpack-internal:///(middleware)/./node_modules/satori/dist/esm/index.wasm.js:18:20138)
at new vt (webpack-internal:///(middleware)/./node_modules/satori/dist/esm/index.wasm.js:18:19783)
at mu (webpack-internal:///(middleware)/./node_modules/satori/dist/esm/index.wasm.js:18:49554)
at Object.start (webpack-internal:///(middleware)/./node_modules/@vercel/og/dist/index.js:10:2973)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Description / Observed Behavior
Could not load a variable font
Expected Behavior
The font loads
Reproduction
const font = fetch(
new URL(
'path/to/GeneralSans-Variable.ttf',
import.meta.url,
),
).then(async res => res.arrayBuffer());
// Then load with:
const options = {
fonts: [
{
name: "General Sans",
data: await font,
style: "normal",
},
],
};
https://www.fontshare.com/fonts/general-sans
Additional Context
ali in ~/code/website on master λ yarn why satori
└─ @vercel/og@npm:0.0.15
└─ satori@npm:0.0.38 (via npm:0.0.38)
Originally was going to report this issue in shuding/opentype.js, but the repo has issues disabled, so was not sure if it was more appropriate to go in https://github.com/opentypejs/opentype.js or here
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 38
- Comments: 15
The workaround is to use a non variable version of the same font, which was fine for my use case (I only needed one weight) 😃
Same issue here using
Montserrat-VariableFont_wght.ttffrom https://fonts.google.com/specimen/Montserrat