---
title: "Fonts"
canonical_url: "https://www.nutrient.io/guides/document-authoring/customize/fonts/"
md_url: "https://www.nutrient.io/guides/document-authoring/customize/fonts.md"
last_updated: "2026-07-08T00:00:00.000Z"
description: "Add custom fonts to Document Authoring through the system font configuration. Keep built-in fonts, load font files, or use a font index for large font libraries."
---

# Configure fonts

Document Authoring includes built-in fonts. To use your own fonts, pass a [`fontConfig`](https://www.nutrient.io/api/document-authoring/types/fontconfig/) object to [`createDocAuthSystem()`](https://www.nutrient.io/api/document-authoring/types/docauthsystem/). You might do this to use a brand typeface or to render and export documents with the fonts they require.

The system stores the font configuration and shares it with every editor and document it creates.

Before you start, make sure the Document Authoring library is installed and running in your app. If you haven’t set it up yet, refer to the [getting started](https://www.nutrient.io/sdk/document-authoring/getting-started.md) guide.

The examples omit error handling. Add it before you use this code in production.

## Keep the built-in fonts

Add [`defaultFontIndex`](https://www.nutrient.io/api/document-authoring/types/defaultfontindex/) to the `fonts` list to keep Document Authoring’s built-in fonts available with any custom fonts you add:

```js

import DocAuth, { defaultFontIndex } from '@nutrient-sdk/document-authoring';

const system = await DocAuth.createDocAuthSystem({
  fontConfig: {
    fonts: [defaultFontIndex],
  },
});

```

If you don’t include `defaultFontIndex`, Document Authoring only uses the fonts you provide.

## Add font files

Add individual fonts as [`FontFile`](https://www.nutrient.io/api/document-authoring/types/fontfile/) entries. Each entry’s `blob` accepts a `Blob`, a `Response`, or a promise that resolves to either one, so you can pass `fetch()` directly:

```js

import DocAuth, { defaultFontIndex } from '@nutrient-sdk/document-authoring';

const system = await DocAuth.createDocAuthSystem({
  fontConfig: {
    fonts: [
      defaultFontIndex,
      { type: 'file', blob: fetch('/fonts/Brand-Regular.ttf') },
      { type: 'file', blob: fetch('/fonts/Brand-Bold.ttf') },
    ],
  },
});

```

## Load large font libraries with an index

Use a [`FontIndex`](https://www.nutrient.io/api/document-authoring/types/fontindex/) when your application needs many fonts. The index lets Document Authoring load fonts on demand instead of fetching every font file when the system starts.

First, generate the index from a font directory with the `create-font-index` command:

```bash

npx document-authoring create-font-index --scan-directory./fonts --write-to public/fonts/font-index.json

```

Host `font-index.json` with your fonts. Then point the `index` entry at the file and provide a `loadFn` that fetches a font by name:

```js

const system = await DocAuth.createDocAuthSystem({
  fontConfig: {
    fonts: [
      defaultFontIndex,
      {
        type: 'index',
        index: fetch('/fonts/font-index.json'),
        loadFn: (name) => fetch(`/fonts/${name}`),
      },
    ],
  },
});

```

Document Authoring reads the index and calls `loadFn` only for fonts the document uses.

## Notes

- Create the system once and reuse it across editors, because you set fonts when you create the system.

- Font configuration is separate from self-hosting the engine’s runtime assets. To serve WebAssembly and other runtime assets from your own infrastructure, refer to the [self-hosting assets](https://www.nutrient.io/guides/document-authoring/deploy-and-production/self-hosting-assets.md) guide.

## Learn more

**[How Document Authoring works](https://www.nutrient.io/guides/document-authoring.md)**\
Understand the system, editor, and document model.

**[Self-hosting assets](https://www.nutrient.io/guides/document-authoring/deploy-and-production/self-hosting-assets.md)**\
Serve the engine’s runtime assets from your own infrastructure.
---

## Related pages

- [Use events and integration APIs](/guides/document-authoring/customize/events-and-integration.md)
- [Set the locale and units](/guides/document-authoring/customize/localization-and-units.md)
- [Customize actions and the toolbar](/guides/document-authoring/customize/actions-and-toolbar.md)
- [Use spellcheck in Document Authoring](/guides/document-authoring/customize/spellcheck.md)