---
title: "Dynamic font loading in PDF form using JavaScript | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/forms/fill-form-fields/dynamic-font-loading/"
md_url: "https://www.nutrient.io/guides/web/forms/fill-form-fields/dynamic-font-loading.md"
last_updated: "2026-05-23T00:08:18.171Z"
description: "Discover the benefits of dynamic font loading for your website. Improve loading speed and user experience with our comprehensive guide and tips."
---

# Dynamic font loading in PDF forms using Nutrient Web SDK

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](https://www.nutrient.io/downloads/dynamicFonts.zip). 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:

```typescript

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:

```bash

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](https://github.com/PSPDFKit/nutrient-font-tool).
---

## Related pages

- [Adding an image to a PDF form using JavaScript](/guides/web/forms/fill-form-fields/add-image.md)
- [Detecting user inputs in PDF forms](/guides/web/forms/fill-form-fields/detect-user-input.md)
- [Attach a file to a PDF form using JavaScript](/guides/web/forms/fill-form-fields/attach-a-file.md)
- [Headless form fill](/guides/web/forms/fill-form-fields/headless.md)
- [Import data into PDFs from a database](/guides/web/forms/fill-form-fields/import-from-database.md)
- [Import data into PDF forms using Instant JSON](/guides/web/forms/fill-form-fields/import-from-instant-json.md)
- [Import data into PDF forms using XFDF](/guides/web/forms/fill-form-fields/import-from-xfdf.md)
- [Import data into PDF form using Web SDK with Document Engine](/guides/web/forms/fill-form-fields/import-from-server-backed.md)
- [Customizing PDF form permissions](/guides/web/forms/fill-form-fields/permissions.md)
- [Fill PDF forms programmatically using JavaScript](/guides/web/forms/form-filling.md)
- [Fill PDF form fields using our JavaScript viewer UI](/guides/web/forms/fill-form-fields/using-the-ui.md)