Typography & Fonts

Takumi does not use system fonts. All fonts must be explicitly loaded to be available for rendering.

For @takumi-rs/core (napi-rs version), full axis (which means 100-900 weights available) Geist and Geist Mono are embedded by default.

Font

import { ImageResponse } from "@takumi-rs/image-response";
import type { Font } from "@takumi-rs/core";

const interBuffer = await fetch("/path-to-inter.woff2").then((res) => res.arrayBuffer());

const fonts: Font[] = [
  {
    name: "Inter",
    data: interBuffer
  }
];

export function GET() {
  return new ImageResponse(<div />, {
    fonts,
  });
}

Variations & Features

Thanks to underlying engine support, you can control font axes using the font-variation-settings CSS property, or font-feature-settings for OpenType features.

For variable fonts, font-weight has the same effect as font-variation-settings: "wght" <weight>.

<div style={{
  fontFamily: "Geist",
  fontVariationSettings: "'wght' 700, 'wdth' 150",
  fontFeatureSettings: "ss01"
}}>
  Variable Font Text
</div>

Render Emojis

Dynamic fetching

If you are using ImageResponse API, theres a satori compatible emoji option.

import { ImageResponse } from "@takumi-rs/image-response";

export function GET() {
  return new ImageResponse(
    <div tw="flex justify-center items-center text-3xl">Hello 👋😁</div>, 
    {
      emoji: "twemoji",
    }
  );
}

Under the hood it calls extractEmojis helper function, which separates the emoji segments from the text and modifies the text node.

import { extractEmojis } from "@takumi-rs/helpers/emoji";
import { fromJsx } from "@takumi-rs/helpers/jsx";
import { fetchResources } from "@takumi-rs/helpers";
import { Renderer, extractResourceUrls } from "@takumi-rs/core";

let { node } = await fromJsx(
  <div tw="flex justify-center items-center text-3xl">Hello 👋😁</div>
);
node = extractEmojis(node, "twemoji");

const resourceUrls = extractResourceUrls(node);
const fetchedResources = await fetchResources(resourceUrls);

const renderer = new Renderer();

const image = await renderer.render(node, {
  fetchedResources,
});

COLR/Bitmap Font File

Takumi supports the COLR font format, which is commonly used for emojis like Twemoji-COLR.

The file size is much smaller than rasterized emoji fonts like Noto Color Emoji.

Typography

Overflow Ellipsis

When text-overflow is set to ellipsis, Takumi tries to match the expected line-clamp constraint or maximum container height.

Setting white-space: nowrap is not required, which enables multiline ellipsis handling.

<div style={{
  textOverflow: "ellipsis",
  lineClamp: 3,
}}>
  Super Long Text
</div>

RTL & Bidirectional Text

Support for Right-to-Left (RTL) languages like Arabic or Hebrew is handled automatically by the underlying Parley engine.

But currently there's no manual control over the direction of the text (see issue #330).

Wrapping

Takumi supports both balance and pretty text wrapping. The algorithm is modified from satori's implementation.

<div style={{ textWrap: "balance" }}>
  Super Long Text
</div>