An example of using custom fonts with `next/og` and `nodejs` runtime:

nextjs_og_custom-font_rotue.tsx

/**
 * adopted from: https://stackoverflow.com/a/77146678/5863267
 */

// directory structure for this code was:
// file: /app/(api)/thumb/ellipsis/route.tsx
// font file: /assets/fonts/<font>

import { readFile } from 'node:fs/promises';
import { join } from 'node:path';

import { ImageResponse } from 'next/og';

import EllipsisThumbnail from '@/components/thumbnails/ellipsis';

import type { ServerRuntime } from 'next';

export const runtime: ServerRuntime = 'nodejs';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);

  const title = searchParams.get('title');
  const subtitle = searchParams.get('subtitle');
  const color = searchParams.get('color');

  return new ImageResponse(
    <EllipsisThumbnail title={title} subtitle={subtitle} colorScheme={color} />,
    {
      width: 800,
      height: 400,
      fonts: [
        {
          name: 'Nunito',
          data: await readFile(
            join(__dirname, '../../../../../../assets/fonts/Nunito-Regular.ttf')
          ),
          weight: 400,
          style: 'normal',
        },
        {
          name: 'Nunito',
          data: await readFile(
            join(__dirname, '../../../../../../assets/fonts/Nunito-Black.ttf')
          ),
          weight: 900,
          style: 'normal',
        },
      ],
    }
  );
}