Fonts & images

Supply fonts through fonts and image bytes through images. Remote document images must be fetched before rendering. Font URL loaders and googleFonts() perform their own requests.

Fonts

import { render } from "takumi-pdf";

import { googleFonts } from "@takumi-rs/helpers";

const pdf = await render(doc, {
  fonts: [...(await googleFonts(["Inter"])), { name: "Brand Sans", weight: 700, data: fontBytes }],
  fontFamilies: ["Brand Sans", "Inter", "sans-serif"],
});

Text stays selectable and searchable. Pass font URLs, raw bytes, or googleFonts entries. fontFamilies sets the fallback chain, and a reused renderer deduplicates registered fonts.

For offline renders, bundle font files. Google Fonts requests use the shared fetch limits and retries.

The renderer does not use installed system fonts. If no registered font covers a body-text character, the render fails with the character and its codepoint. Register coverage for every script you use. Google Fonts may split accented characters between latin and latin-ext subsets.

Images

Pass fetched bytes for each image URL in the document. The PDF renderer does not fetch those URLs:

import { render } from "takumi-pdf";

const response = await fetch(logoUrl);
if (!response.ok) throw new Error(`Logo request failed: ${response.status}`);
const logoBytes = new Uint8Array(await response.arrayBuffer());

const pdf = await render(doc, {
  images: [{ src: logoUrl, data: logoBytes }],
});

SVG image sources embed as vector paths and gradients, so logos stay sharp at any zoom. Subtrees that vectors cannot express (filters, embedded bitmaps) rasterize at 2× their placed size. Raster sources embed once for each distinct pixel data.

PNG, JPEG and WebP bytes all embed. A JPEG goes in as the JPEG you passed, so the PDF carries the compression the file already had. GIF bytes are rejected: no decoder for them ships in this build.

CSS color filters on images require decoded pixels. The PDF build decodes PNG for this path, so filtered JPEG and WebP images are rejected. PDF output also rejects CSS filter: blur() and drop-shadow(). Prepare those effects in a raster image before rendering.