Configure fonts

Document Authoring includes built-in fonts. To use your own fonts, pass a fontConfig object to createDocAuthSystem(). 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 guide.

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

Keep the built-in fonts

Add defaultFontIndex to the fonts list to keep Document Authoring’s built-in fonts available with any custom fonts you add:

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 entries. Each entry’s blob accepts a Blob, a Response, or a promise that resolves to either one, so you can pass fetch() directly:

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 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:

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:

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 guide.

Learn more

How Document Authoring works
Understand the system, editor, and document model.

Self-hosting assets
Serve the engine’s runtime assets from your own infrastructure.