Skip to main content
Forme includes three standard PDF font families by default: Helvetica, Times, and Courier (each with regular, bold, italic, and bold italic variants). For any other typeface, register a TrueType (.ttf) font file. Registered fonts are automatically subsetted — only glyphs used in the document are embedded, keeping file sizes small.

​
Font.register()

Register fonts globally. Works like react-pdf’s Font.register(). 
import { Font } from '@formepdf/react';

Font.register({
  family: 'Inter',
  src: './fonts/Inter-Regular.ttf',
});

Font.register({
  family: 'Inter',
  src: './fonts/Inter-Bold.ttf',
  fontWeight: 'bold',
});

Font.register({
  family: 'Inter',
  src: './fonts/Inter-Italic.ttf',
  fontStyle: 'italic',
});
Then use the font by name in any style: 
<Text style={{ fontFamily: 'Inter', fontSize: 14 }}>
  Regular text in Inter
</Text>
<Text style={{ fontFamily: 'Inter', fontSize: 14, fontWeight: 'bold' }}>
  Bold text in Inter
</Text>

​
Options

OptionTypeDefaultDescription
familystring(required)Font family name to reference in fontFamily style
srcstring | Uint8Array(required)Font source: file path, base64 data URI, or raw bytes
fontWeightnumber | "normal" | "bold"400Font weight. "normal" = 400, "bold" = 700.
fontStyle"normal" | "italic" | "oblique""normal"Font style variant

​
Font.clear()

Remove all globally registered fonts. Useful in tests. 
Font.clear();

​
Document fonts prop

Register fonts per-document instead of globally: 
<Document fonts={[
  { family: 'Roboto', src: './fonts/Roboto-Regular.ttf' },
  { family: 'Roboto', src: './fonts/Roboto-Bold.ttf', fontWeight: 'bold' },
  { family: 'Roboto', src: './fonts/Roboto-Italic.ttf', fontStyle: 'italic' },
]}>
  <Text style={{ fontFamily: 'Roboto' }}>Hello in Roboto</Text>
</Document>
Document fonts and global fonts are merged. If both register the same family + weight + style combination, the document font wins.

​
Font sources

The src option accepts three formats:
FormatExampleWhen to use
File path'./fonts/Inter.ttf'Local development, CLI dev server
Data URI'data:font/ttf;base64,AAAA...'Pre-encoded fonts, bundled assets
Uint8Arraynew Uint8Array(buffer)Fonts loaded from a database or API
File paths are resolved relative to the template file in the CLI dev server (forme dev), or relative to the working directory in renderDocument().

​
Standard fonts

These fonts are always available without registration:
FamilyWeightsStyles
Helvetica400, 700normal, italic
Times400, 700normal, italic
Courier400, 700normal, italic
If a fontFamily is not found, Forme falls back to Helvetica.

​
Example: Multiple weights

import { Font, Document, Page, View, Text } from '@formepdf/react';
import { renderDocument } from '@formepdf/core';

Font.register({ family: 'Inter', src: './fonts/Inter-Regular.ttf' });
Font.register({ family: 'Inter', src: './fonts/Inter-Medium.ttf', fontWeight: 500 });
Font.register({ family: 'Inter', src: './fonts/Inter-SemiBold.ttf', fontWeight: 600 });
Font.register({ family: 'Inter', src: './fonts/Inter-Bold.ttf', fontWeight: 700 });

const pdf = await renderDocument(
  <Document>
    <Page size="A4" margin={54}>
      <Text style={{ fontFamily: 'Inter', fontWeight: 400 }}>Regular (400)</Text>
      <Text style={{ fontFamily: 'Inter', fontWeight: 500 }}>Medium (500)</Text>
      <Text style={{ fontFamily: 'Inter', fontWeight: 600 }}>SemiBold (600)</Text>
      <Text style={{ fontFamily: 'Inter', fontWeight: 700 }}>Bold (700)</Text>
    </Page>
  </Document>
);