Font Support

A document-aware font picker, editable font controls, and carefully selected fallbacks.

Word documents name fonts. Browsers render font files.

That gap is why a DOCX can look right in Word and different in a web editor. Word has Office fonts installed. A browser only has the fonts the operating system provides, the fonts your app loads, and the fonts the editor ships.

This release makes that path explicit. SuperDoc now gives the toolbar a document-aware font list, reviewed fallback fonts, and an editable font picker that behaves like a real document editor control.

Fallbacks we can explain

The easy version of font support is to add a long list of familiar names to the dropdown and let the browser guess.

SuperDoc does not do that.

The built-in font list is derived from SuperDoc's shared font registry. A font only becomes a default toolbar option when we have a clear rendering story for it: an approved fallback, a bundled asset when needed, license metadata, source information, hashes, and notices.

The important detail is that SuperDoc keeps the Word-facing font name. If a document asks for Calibri, the exported DOCX still says Calibri. When SuperDoc has an approved fallback, the browser paints with that fallback. When it does not, SuperDoc keeps the original name and lets your app load the real font.

That gives you predictable rendering without pretending that proprietary fonts are free to redistribute.

More useful defaults

The built-in toolbar now includes a broader reviewed default set, including common Word-facing families such as Arial Narrow, Baskerville Old Face, Brush Script MT, Calibri, Century, Lucida Console, Times New Roman, Georgia, and Courier New.

The list is intentionally not every font Word knows about. Some fonts require a licensed file. Some candidates do not have a good open fallback yet. Those stay out of the default list until we can support them honestly.

Document-used fonts still appear in the picker. If a DOCX uses a font that is not in the default list, SuperDoc can surface it so users can re-apply the same document font. The fallback rules stay the same: use the real font if your app loads it, use the reviewed fallback when SuperDoc ships one, otherwise preserve the original font name.

A better font picker

Font selection also got a real toolbar experience.

The font family control is now editable. Click the field and type. SuperDoc autocompletes matching fonts, keeps the list available when you open it, and lets you accept the suggestion with Enter or Tab. The caret opens the full list when you want to browse.

Font size follows the same split-control pattern: click the value to type, click the caret to open the menu. Tabbing from font family moves into font size, and tabbing again returns focus to the document so typing can continue with the selected formatting.

Prefer watching it?

Same data for custom UI

If you build your own toolbar, use the same font option data that powers the built-in control.

import {
  useSuperDocCommand,
  useSuperDocFontOptions,
  useSuperDocFontSizeOptions,
  useSuperDocUI,
} from 'superdoc/ui/react';

function useTypographyControls() {
  const ui = useSuperDocUI();
  const font = useSuperDocCommand('font-family');
  const size = useSuperDocCommand('font-size');
  const fonts = useSuperDocFontOptions();
  const sizes = useSuperDocFontSizeOptions();

  return {
    currentFont: font.value,
    currentSize: size.value,
    fonts,
    sizes,
    applyFont: (value: string) => ui?.toolbar.execute('font-family', value),
    applySize: (value: string) => ui?.toolbar.execute('font-size', value),
  };
}

label is what you show. value is what you apply. previewFamily is only for rendering the row preview.

Loading licensed fonts

SuperDoc's fallbacks cover only the fonts it ships and verifies. If your product needs the exact proprietary font, load that font in your host app:

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

Once the browser can resolve the font, SuperDoc uses it. The toolbar configuration makes a font selectable. @font-face makes it render.

Get started

npm install superdoc

• Font support docs
• Custom UI font picker
• Custom UI API reference

Documents should not depend on browser guesswork. SuperDoc now treats font support the same way it treats DOCX rendering: preserve the document's intent, make fallbacks explicit, and only ship defaults we can stand behind.