← Back to Guides

Using a custom font in your OG Image

Learn how to use a custom font from the tile system in your OG images.

You can use the following code sample to explore using parameters and different content types with next/og. To learn more about OG Image Generation, see Open Graph Image Generation.

Create an api route with route.tsx in /app/api/og/ and paste the following code:

import { ImageResponse } from 'next/og';
// App router includes @vercel/og.
// No need to install it.
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(
          backgroundColor: 'white',
          height: '100%',
          width: '100%',
          fontSize: 100,
          fontFamily: '"Typewriter"',
          paddingTop: '100px',
          paddingLeft: '50px',
        Hello world!
      width: 1200,
      height: 630,
      fonts: [
          name: 'Typewriter',
          data: fontData,
          style: 'normal',

If you're not using a framework, you must either add "type": "module" to your package.json or change your JavaScript Functions' file extensions from .js to .mjs

Preview the OG route locally by running the following command:

pnpm dev

Then, browse to http://localhost:3000/api/og. You will see the following image:

Image generated using the custom font typewriter
Last updated on May 18, 2024