# Theme UI and resolve document fonts

> Style SuperDoc chrome without confusing application typography with DOCX font fidelity.



SuperDoc has two font concerns. UI typography controls toolbars, comments, menus, and surfaces. Document font resolution controls how logical Word fonts are measured and painted. Configure them separately.

```ts
import { SuperDoc, createTheme } from 'superdoc';
import 'superdoc/style.css';

const shell = document.querySelector<HTMLElement>('#editor-shell');
if (!shell) throw new Error('The Editor shell is missing.');

const themeClass = createTheme({
  name: 'product',
  font: 'Inter, system-ui, sans-serif',
  colors: { action: '#2563eb', bg: '#f8fafc', text: '#0f172a', border: '#cbd5e1' },
  vars: { '--sd-ui-toolbar-bg': '#eef2ff', '--sd-layout-page-bg': '#ffffff' },
});
shell.classList.add(themeClass);

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/contract.docx',
  uiDisplayFallbackFont: 'Inter, system-ui, sans-serif',
  onReady: async ({ superdoc: readySuperDoc }) => {
    readySuperDoc.fonts.add({
      family: 'Product Sans',
      faces: [{ source: '/fonts/product-sans-regular.woff2', weight: 400, style: 'normal' }],
    });
    readySuperDoc.fonts.map({ Calibri: 'Product Sans' });
    await readySuperDoc.fonts.preload(['Calibri']);
  },
  onFontsChanged: ({ missingFonts }) => {
    if (missingFonts?.length) console.warn('Missing document fonts', missingFonts);
  },
});

window.addEventListener('beforeunload', () => superdoc.destroy());

```

`createTheme()` injects a scoped CSS-variable class. Apply it to the element that contains the Editor. Start with semantic colors and add raw `--sd-*` variables only for a specific component need. For strict CSP or server rendering, use `buildTheme()` and inject the returned CSS with your own nonce.

`uiDisplayFallbackFont` sets the UI fallback stack. It does not change fonts stored in the DOCX.

The `superdoc.fonts` API reports document fonts, registers physical faces, maps logical Word families to render families, and preloads faces before interaction. Mapping is render-only: export preserves the logical family name. Observe `onFontsChanged` or `fonts.onReport()` before declaring a font missing, because the authoritative report includes substitution and load state.

Host font assets on a stable, CORS-compatible origin and include them in CSP. Confirm their license permits web delivery. Test pagination after font changes because glyph metrics can change line and page breaks.