sveltekit-og

To ensure consistent typography in generated images, the rendering engine (Satori) requires font files as raw binary data (ArrayBuffer). You cannot use standard CSS @font-face rules.

sveltekit-og provides three main ways to manage this:

1. GoogleFont: Automatically fetches and caches Google Fonts.
2. CustomFont: Used for local files or remote URLs.
3. resolveFonts: A utility that converts font instances into the required binary data format.

Important: The resolveFonts Pattern

For the standard ImageResponse engine, you must pass your font instances through await resolveFonts([...]) before passing the result to the fonts option.

Note: If you are using the Takumi engine, you pass font instances directly to fonts and skip resolveFonts.

import { ImageResponse } from '@ethercorps/sveltekit-og';
import { GoogleFont, resolveFonts } from '@ethercorps/sveltekit-og/fonts';

const font = new GoogleFont('Inter', { weight: 400 });

export const GET = async () => {
  // Always resolve before passing to ImageResponse
  const resolvedFonts = await resolveFonts([font]);

  return new ImageResponse('<div>Hello</div>', {
    fonts: resolvedFonts
  });
};

The simplest way to reference assets located in your static folder is to use a full absolute URL. Satori requires an absolute URL (e.g., https://example.com/logo.png) to fetch the image via HTTP.

Implementation: Construct the URL using the url.origin property from the SvelteKit request object.

Warning for Edge Runtimes: In Edge Runtimes (Cloudflare, Vercel Edge, Deno), using fetch() to retrieve an asset from your own server via url.origin can cause slow cold starts. In these environments, Vite Inline Import (?inline) or Reading Local Assets ($app/server/read) are strongly preferred.

import { ImageResponse } from '@ethercorps/sveltekit-og';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ url }) => {
	// Construct the absolute URL using the request URL's origin
	// Assumes logo.png is in the static folder
	const absoluteUrl = `${url.origin}/logo.png`;

	const htmlToRender = `
    <div tw="flex">
      <img src="${absoluteUrl}" width="100" height="100" />
    </div>
  `;

	return new ImageResponse(htmlToRender, { width: 1200, height: 630 });
};

To use .ttf or .otf files stored within your project, use the CustomFont class. This requires a lazy-loading pattern to ensure the file is read only when needed.

Implementation Steps

1. Import the file: Use the Vite ?url suffix (e.g., import MyFont from './font.ttf?url') to get the build-time path.
2. Wrap in CustomFont: Pass a function to the CustomFont constructor that returns the ArrayBuffer. Use SvelteKit's $app/server read function to retrieve the file.

Warning: On certain adapters like Netlify, Vite's ?url combined with read may fail. In those cases, use Node's fs module or a public URL.

import { CustomFont, resolveFonts } from '@ethercorps/sveltekit-og/fonts';
import { read } from '$app/server';
import RegularFontPath from '$lib/assets/MyFont-Regular.ttf?url';

const myCustomRegular = new CustomFont(
  'My Custom Font',
  () => read(RegularFontPath).arrayBuffer(),
  { weight: 400 }
);