--- title: "Rich text in PDF annotations using JavaScript | Nutrient SDK" canonical_url: "https://www.nutrient.io/guides/web/annotations/create-edit-and-remove/rich-text/" md_url: "https://www.nutrient.io/guides/web/annotations/create-edit-and-remove/rich-text.md" last_updated: "2026-05-15T09:08:03.692Z" description: "Rich text in PDF annotations using JavaScript | guide for Nutrient Web SDK with detailed instructions and code examples." --- # Rich text in PDF annotations using JavaScript Rich text editing is supported for text annotations. When you paste rich text into an annotation from an external source, in some cases, the text in the annotation might not visually match the external source. We constantly aim to improve this feature. If you encounter any issues, [contact our Support team](https://support.nutrient.io/hc/en-us/requests/new). Rich text editing in text annotations means you can select parts of an annotation’s text and do the following: - Change the color and the background color. - Adjust font family and font size. - Make it bold, italic, or underlined. ## Enabling rich text editing in annotations Rich text editing in annotations is disabled by default. To enable rich text editing, use the `enableRichText` property when loading Nutrient: ```js NutrientViewer.load({...configuration, enableRichText: () => true }); ``` ## Creating a rich text annotation The code below creates a new text annotation with rich text content: ```js NutrientViewer.load({...configuration, enableRichText: () => true }).then(async (instance) => { const newAnnotation = new NutrientViewer.Annotations.TextAnnotation({ pageIndex: 0, boundingBox: new NutrientViewer.Geometry.Rect({ left: 94, top: 279, width: 100, height: 41 }), text: { format: "xhtml", value: "

Welcome to Nutrient

" } }); instance.create(newAnnotation); }); ``` ## XHTML format and compatibility When writing HTML for rich text annotations, you can apply the following: - No need to include the XML declaration (``). - No need to include `` declarations. - No need to include `` and `` tags with namespaces. - Always wrap blocks of text with `

` or `

` for your content. - Use semantic tags like ``, ``, or `` for basic formatting. - Use `` with style attributes for more specific styling control. The conversion to XHTML happens automatically, so you don’t need to worry about the complex XHTML structure in most cases. Instead, use the simplified format: ```js text: { format: "xhtml", value: "

Welcome to Nutrient

" } ``` Under the hood, it’ll be automatically converted to a fully compatible XHTML format that looks like this: ```xml

Welcome to Nutrient

``` ## Text styling properties When using the `` tag, you can apply various styling properties using the `style` attribute. Below is a table with all the supported properties and their default values: | Property | Default value | Description | Example | | ------------------ | ------------- | -------------------------- | ----------------------------------------------------------------- | | `color` | `#000000` | Sets text color | `Colored text` | | `background-color` | `transparent` | Sets background text color | `Highlighted text` | | `font-family` | `Helvetica` | Sets font family | `Different font` | | `font-size` | `18px` | Sets font size | `Larger text` | | `font-weight` | `normal` | Controls text boldness | `Bold text` | | `font-style` | `normal` | Controls text italics | `Italic text` | | `text-decoration` | `none` | Controls text underline | `Underlined text` | ## Supported HTML tags Use the following tags in rich text annotations: - `` — HTML document container - `` — Body - `` or `` — Bold text - `` or `` — Italic text - `` — Underline text - `

` — Use this tag for blocks of text and to add empty lines between paragraphs. - `

` — Can be used as an alternative to `

` for grouping content, though `

` is recommended for text blocks. - `` — Use this tag to apply styling to inline text as shown in the table above. ## Annotation-level text configuration Some properties can only be applied to the annotation text as a whole, and not just to isolated parts of it, both for rich text and plain text annotations: - Horizontal alignment - Vertical alignment - Opacity ## Dynamic font loading 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 - [Annotation flags](/guides/web/annotations/annotation-flags.md) - [Create PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/create.md) - [Defining the author of an annotation](/guides/web/annotations/annotation-author-name.md) - [Add image annotations to PDFs using JavaScript](/guides/web/annotations/create-edit-and-remove/add-image.md) - [Cut, copy, paste, and duplicate annotations in PDF using JavaScript](/guides/web/annotations/create-edit-and-remove/cut-copy-duplicate.md) - [Detect changes in annotations](/guides/web/annotations/detecting-if-annotations-have-changed.md) - [Edit PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/edit.md) - [Select PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/multiple-selection.md) - [Customizing annotation permissions](/guides/web/annotations/create-edit-and-remove/permissions.md) - [Remove PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/remove.md) - [Undo and redo annotations](/guides/web/annotations/create-edit-and-remove/undo-redo.md)