Load fonts on demand in PDFs using JavaScript

Nutrient Web SDK introduces a powerful dynamic font loading mechanism that enables you to dynamically load fonts when users enter text containing characters not supported by available fonts. This feature ensures text is correctly displayed, even when the user’s language and character set aren’t known in advance.

When dynamic fonts are used

Dynamic fonts are currently used in the following scenarios:

  • Office-to-PDF or PDF-to-Office conversions — Office or PDF documents frequently use fonts that aren’t available to the SDK. With dynamic font loading, Nutrient Web SDK can fetch the necessary fonts to render the document text with closer fidelity.
  • Text annotations — When users type text annotations using non-standard fonts, dynamic fonts are loaded to render the characters correctly.
  • PDF forms — When users fill in form fields that use fonts not included by default in the SDK, dynamic fonts ensure the text is properly rendered.

The dynamic font loading process works as follows: When a user types into a text box, the SDK checks if it can render the characters. If a specific font is needed, it requests and downloads that font, and then renders the text.

How dynamic fonts differ from custom fonts

  • Custom fonts are downloaded before the viewer starts rendering. They’re used everywhere the viewer uses fonts throughout the document.
  • Dynamic fonts are only downloaded when users enter text, avoiding upfront loading time.

Default fonts bundle

To use this feature, we provide a default, ready-to-use dynamic fonts bundle. Follow the steps below:

  • Extract the compressed file into a public folder accessible to your application, preferably in the same folder as the application to avoid CORS issues.
  • Set the dynamicFonts property in the configuration object passed to NutrientViewer.load() to a URL pointing to the JSON file with the dynamic fonts data as shown below:
NutrientViewer.load({
  ...configuration,
  dynamicFonts: "https://example.com/path/to/fonts.json"
});

The fonts.json file contains the information necessary for Nutrient Web SDK to download and make use of the fonts included in the bundle when needed.

Creating your own font bundle

You can create your own dynamic font bundle using the nutrient-font-tool CLI:

Terminal window
npx @nutrient-sdk/font-tool create ./my-fonts

This generates a fonts.json file in your font directory. The tool recursively scans for .ttf, .otf, .ttc, and .otc files and extracts the metadata needed by Nutrient Web SDK.

For more options, see the nutrient-font-tool repository(opens in a new tab).