Load fonts on demand in PDFs using JavaScript

Nutrient Web SDK introduces a dynamic font loading mechanism that can load fonts when a PDF or user input references characters not supported by currently available fonts. This feature helps ensure 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.
  • PDF page rendering — When a PDF references non-embedded fonts, the SDK can fetch matching fonts so the page renders with the intended typefaces.
  • 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.

If you configure font substitutions, dynamic font loading applies those rules when resolving missing fonts. Font substitution during page rendering is available starting with Nutrient Web SDK 1.13.0.

The dynamic font loading process works as follows: When the SDK needs to render text and doesn’t have the required font, it requests and downloads that font and then renders the content.

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 the SDK needs them, 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 to use it.

  • 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).