Font support

SuperDoc keeps the font name from the Word document. When SuperDoc ships an approved fallback for that font, it renders with the fallback but keeps the original name for export. When no fallback is available, load the real font in your app.

Load fonts in your app

Fonts are your host page’s responsibility. @font-face, a hosted stylesheet, or a font CDN: anything the browser can resolve.

@font-face {
  font-family: 'Calibri';
  src: url('/fonts/Carlito-Regular.woff2') format('woff2');
  font-display: swap;
}

For custom or licensed fonts, load the real file yourself. SuperDoc’s built-in fallbacks cover only the fonts it ships and verifies.

Toolbar font list

The built-in toolbar lists SuperDoc’s defaults plus fonts used by the active document, sorted alphabetically. If you pass modules.toolbar.fonts, that custom list replaces the default list.

Each custom entry is a { label, key } pair where key is the CSS font-family value:

new SuperDoc({
  selector: '#editor',
  document: 'contract.docx',
  modules: {
    toolbar: {
      fonts: [
        { label: 'Calibri', key: 'Calibri, sans-serif' },
        { label: 'Inter', key: 'Inter, sans-serif' },
        { label: 'Times New Roman', key: '"Times New Roman", serif' },
      ],
    },
  },
});

Registering a custom toolbar font makes it selectable. It does not load the font file. You still need the @font-face (or equivalent) on your host page.

For custom UI, use useSuperDocFontOptions() or ui.fonts to get the same default-plus-document font list.

Programmatic font changes

For AI agents or scripts setting a brand font:

editor.doc.format.fontFamily({ target, value: 'Inter' });

Common pitfalls

• Font name preserved, browser falls back. SuperDoc keeps the DOCX font name. If no bundled fallback or loaded real font exists, the browser chooses its own fallback.
• Custom toolbar list hides document fonts. Passing modules.toolbar.fonts replaces the built-in list. Include every option you want users to pick.
• Office font licensing. Calibri, Cambria, and Aptos are licensed Microsoft fonts. Self-hosting the real files requires a license.

Where to next

• Built-in UI > Toolbar: full toolbar font configuration options
• Custom UI > Toolbar and commands: custom font picker example
• Document API > Available operations: programmatic font formatting
• Editor > Theming: set the default font for SuperDoc’s UI chrome