Unable to apply font

[finom]

Hey guys! I've created another issue before https://github.com/vercel/satori/issues/321. I thought it's because the engine used by @vercel/og don't include any font with bold style. But I've got the following error:

[0] error - TypeError: Cannot read properties of undefined (reading '256')
[0]     at parseFvarAxis (webpack-internal:///(middleware)/./node_modules/@shuding/opentype.js/dist/opentype.module.js:10290:22)
[0]     at Object.parseFvarTable [as parse] (webpack-internal:///(middleware)/./node_modules/@shuding/opentype.js/dist/opentype.module.js:10326:13)
[0]     at Object.parseBuffer [as parse] (webpack-internal:///(middleware)/./node_modules/@shuding/opentype.js/dist/opentype.module.js:11618:33)
[0]     at bt.addFonts (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:19:19480)
[0]     at new bt (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:19:19079)
[0]     at bu (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:20:28040)
[0]     at Object.start (webpack-internal:///(middleware)/./node_modules/@vercel/og/dist/index.js:10:2973)

There is my code:

import React from 'react';
import { ImageResponse } from '@vercel/og';
import { NextApiRequest, NextApiResponse } from 'next';
// eslint-disable-next-line import/no-relative-packages
import { ShareResult } from '../../../../common/types';
import { getDocument } from '../../lib/firebaseApp';

export const config = {
  runtime: 'experimental-edge',
};

const fontPromise = fetch(new URL('../../styles/opensans.ttf', import.meta.url)).then(
  (res) => res.arrayBuffer(),
);

export default async function ogImage(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const fontData = await fontPromise;

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',

        }}
      >... </div>
    ),
    {
      width: 600,
      height: 700,
      emoji: 'twemoji',
      fonts: [
        {
          name: 'opensans',
          data: fontData,
          style: 'normal',
        },
      ],
    },
  );
}

Any idea how to fix that?

UPD

It looks like the example from the official documentation also doesn't support bold font: https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples#using-tailwind-css---experimental (notice font-bold class)

[shuding]

Could you please share the font that you are using?

[finom]

@shuding I'm sorry, it is already fixed and I forgot how :)

[macguirerintoul]

I was getting this same error coming from @vercel/og; in my case, I was trying to use a variable font file. Replacing it with a static font file solved the issue.