Font Loader - OGify | Generate beautiful Open Graph images in minutes

Google Fonts (Zero-Config)

To use a Google Font, specify its name and weight in your template definition. OGify fetches the font file automatically.

import { defineTemplate } from "@ogify/core";

const template = defineTemplate({
  fonts: [
    { name: "Inter", weight: 400 },
    { name: "Inter", weight: 700 },
    { name: "Roboto Mono", weight: 400, style: "italic" },
  ],
  renderer: ({ params }) => (
    <div tw="flex w-full h-full items-center justify-center font-bold text-[48px]">
      {params.title}
    </div>
  ),
});

Custom Fonts

From URL
From Buffer

Load a font from any public URL

import { defineTemplate } from "@ogify/core";

const template = defineTemplate({
  fonts: [
    {
      name: "MyCustomFont",
      url: "https://example.com/fonts/my-font.woff",
      weight: 600,
    },
  ],
  renderer: ({ params }) => (
    <div tw="flex w-full h-full items-center text-[48px] font-bold">
      {params.title}
    </div>
  ),
});

Use a font file loaded as a buffer (e.g., from filesystem)

import { defineTemplate } from "@ogify/core";
import { readFileSync } from "fs";

const fontData = readFileSync("./fonts/MyFont.ttf");

const template = defineTemplate({
  fonts: [
    {
      name: "MyLocalFont",
      data: fontData,
      weight: 700,
    },
  ],
  renderer: ({ params }) => (
    <div tw="flex w-full h-full items-center text-[48px] font-bold">
      {params.title}
    </div>
  ),
});

Applying Fonts in JSX

Reference the font family in your tw classes or style prop. The first font in the fonts array is used as the default:

renderer: ({ params }) => (
  <div tw="flex flex-col w-full h-full p-16">
    <div tw="text-[64px] font-bold">{params.title}</div>
    <div tw="text-[28px] font-normal opacity-80">{params.subtitle}</div>
  </div>
);

Remote fonts (from Google Fonts or custom URLs) are automatically cached by the renderer’s cache system to avoid repeated network requests and improve performance.

​Google Fonts (Zero-Config)

​Custom Fonts

​Applying Fonts in JSX

Google Fonts (Zero-Config)

Custom Fonts

Applying Fonts in JSX