How to get custom font's to work with OG images

[chopfitzroy]

Summary

I have followed the guide here and produced the following file pages/api/album-art.tsx:

import type { NextRequest } from 'next/server'

import { ImageResponse } from '@vercel/og';

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

const fetchFont = (font: string) => fetch(new URL(
  font,
  import.meta.url,
)).then(
  (res) => res.arrayBuffer(),
);


const karlaBoldFont = fetchFont('../../assets/Karla-Bold.ttf');
const karlaRegularFont = fetchFont('../../assets/Karla-Regular.ttf');
const inconsolataBoldFont = fetchFont('../../assets/Inconsolata-Bold.ttf');
const inconsolataRegularFont = fetchFont('../../assets/Inconsolata-Regular.ttf');


export default async function handler(req: NextRequest) {
  const [
    karlaBoldFontData,
    karlaRegularFontData,
    inconsolataBoldFontData,
    inconsolataRegularFontData
  ] = await Promise.all([
    karlaBoldFont,
    karlaRegularFont,
    inconsolataBoldFont,
    inconsolataRegularFont
  ]);

  try {
    const { searchParams } = new URL(req.url)

    const title = searchParams.get('title') ?? 'My Default Title';

    return new ImageResponse(
      (
        <div
          tw="flex w-full items-center h-full justify-between"
        >
          <p
            tw="text-6xl leading-tight my-0"
            style={{
              fontFamily: 'Inconsolata',
            }}
          >
            {title}
          </p>
        </div>
      ),
      {
        width: 3000,
        height: 3000,
        fonts: [
          {
            name: 'Karla',
            data: karlaBoldFontData,
            style: 'normal',
            weight: 700
          },
          {
            name: 'Karla',
            data: karlaRegularFontData,
            style: 'normal',
            weight: 400
          },
          {
            name: 'Inconsolata',
            data: inconsolataBoldFontData,
            style: 'normal',
            weight: 700
          },
          {
            name: 'Inconsolata',
            data: inconsolataRegularFontData,
            style: 'normal',
            weight: 400
          },
        ],
      },
    )
  } catch (e: any) {
    console.log(`${e.message}`)
    return new Response(`Failed to generate the image`, {
      status: 500,
    })
  }
}

And I have all font files located in assets.

I have tried a number of different combinations of file names, paths, etc... but always get the following error:

[GET] /api/album-art
TypeError: Fetch API cannot load: file:///vercel/path0/assets/Karla-Bold.ttf
    at (pages/api/album-art.tsx:9:36)
    at (pages/api/album-art.tsx:17:22)
    at (webpack/bootstrap:21:0)
    at (webpack/bootstrap:21:0)
    at (node_modules/react/jsx-runtime.js:4:2)
    at (webpack/runtime/jsonp chunk loading:34:0)

Screenshot of source on Vercel:

Have tried with both edge and experimental-edge seeing the same results.

Additional information

No response

Example

No response

[ayoubkhial]

Hey there,
I had the same problem; I solved it by loading the fonts in Node.js runtime.

const font = fs.promises.readFile(path.join(fileURLToPath(import.meta.url), '../../../../../public/fonts/OpenSans-SemiBold.ttf'));

Read more on Vercel documentation.

[chopfitzroy]

This is incredibly useful! Can't believe I missed that! Thank you.

[kaartik2611]

Isn't is possible to use node modules in edge runtime?
How did it work for you?

[lukethacoder]

Documented example looks a tad simplier and no need to use fs, path or fileURLToPath.

import { ImageResponse } from 'next/og';
// App router includes @vercel/og.
// No need to install it.
 
export const runtime = 'edge';
 
export async function GET() {
  // Make sure the font exists in the specified path:
  const fontData = await fetch(
    new URL('../../../../assets/TYPEWR__.ttf', import.meta.url),
  ).then((res) => res.arrayBuffer());
 
  return new ImageResponse(
    (
      <div
        style={{
          backgroundColor: 'white',
          height: '100%',
          width: '100%',
          fontSize: 100,
          fontFamily: '"Typewriter"',
          paddingTop: '100px',
          paddingLeft: '50px',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: 'Typewriter',
          data: fontData,
          style: 'normal',
        },
      ],
    },
  );
}

https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-examples#using-a-custom-font