Fonts

PDFs can only embed font bytes the library can access. If your document uses a custom family, register each TTF/OTF face before calling exportToPDF.

Register a face

import { registerFont } from "react-print-pdf";

await registerFont({
  family: "Inter",
  src: "/fonts/Inter-Regular.ttf",
  weight: 400,
  style: "normal",
});

The family value must match the CSS family used by your printable DOM.

<div style={{ fontFamily: "Inter" }}>...</div>

Type

type FontDescriptor = {
  family: string;
  src: string; // URL to .ttf or .otf
  weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
  style?: "normal" | "italic";
};

Defaults:

weight: 400
style: "normal"

Multiple weights

Register every weight/style pair your document uses.

await Promise.all([
  registerFont({ family: "Inter", src: "/fonts/Inter-Regular.ttf", weight: 400 }),
  registerFont({ family: "Inter", src: "/fonts/Inter-Italic.ttf", weight: 400, style: "italic" }),
  registerFont({ family: "Inter", src: "/fonts/Inter-Bold.ttf", weight: 700 }),
  registerFont({ family: "Inter", src: "/fonts/Inter-BoldItalic.ttf", weight: 700, style: "italic" }),
]);

What registration does

registerFont performs two jobs:

1. Fetches the font bytes for PDF embedding.
2. Loads the same bytes into the browser via FontFace, so DOM layout uses the same face before the walker measures text.

The exporter also waits for document.fonts.ready before walking.

Supported formats

If your web app currently serves WOFF2 only, add a TTF or OTF asset for PDF export.

Fallback behavior

If a DOM text run uses an unregistered font family, the emitter falls back to a standard PDF font. The export continues, but metrics may drift and the PDF will not match the screen exactly.

For production documents, register the actual family and the weights used in the printable subtree.