# Custom Font List

- Human documentation: [https://docs.univer.ai/guides/pdfs/ui/fonts](https://docs.univer.ai/guides/pdfs/ui/fonts)

- Agent Markdown: [https://docs.univer.ai/guides/pdfs/ui/fonts.md](https://docs.univer.ai/guides/pdfs/ui/fonts.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [pdfs/ui/fonts.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/pdfs/ui/fonts.mdx)

---

PDF text and the editor’s font menu use two related but different sources.

| Source                                            | What it controls                                                             |
| ------------------------------------------------- | ---------------------------------------------------------------------------- |
| `document.assets.fonts` and a text run’s `fontId` | Imported PDF font metadata and resources used to reconstruct native content. |
| `fontFamily` on an editable text run              | The CSS font family used to lay out and render editable text.                |
| Univer’s shared font list                         | The options shown by the PDF inspector’s font dropdown.                      |

Adding an option to the shared list does not add an asset to `document.assets.fonts` and does not download or embed a font file.

## Configure the editor font list

The PDF inspector uses the shared `FontFamilyDropdown` when `editor.enabled` is `true`. Configure that list on `UniverUIPlugin` in the browser setup:

```ts
import { UniverUIPlugin } from '@univerjs/ui'

univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  customFontFamily: {
    list: [
      {
        value: 'Inter',
        label: 'Inter',
        category: 'sans-serif',
      },
      {
        value: 'Noto Serif',
        label: 'Noto Serif',
        category: 'serif',
      },
    ],
    override: false,
  },
})
```

Load each browser font yourself, for example with `@font-face` or a stylesheet. Otherwise Canvas uses the browser’s fallback font.

## Add choices at runtime

After the UI Facade is loaded, append choices to the same shared list with `addFonts`:

```ts
univerAPI.addFonts([
  {
    value: 'Inter',
    label: 'Inter',
    category: 'sans-serif',
  },
])
```

This only updates the application font list; it does not load font bytes or rewrite existing PDF runs.

## Apply a font to editable PDF text

Pass `fontFamily` when inserting text or update an editable text box through the PDF Facade:

```ts
const page = univerAPI.getActivePdf()?.getPageByIndex(0)
const textBox = page?.insertTextBox({
  text: 'Hello PDF',
  fontFamily: 'Inter',
  fontSize: 14,
  left: 36,
  top: 36,
})

textBox?.setTextStyle({ fontFamily: 'Noto Serif' })
```

Native imported text returned by `page.getTextSpans()` is a snapshot and cannot be styled in place. Call `replaceText(...)` to promote it to an editable text box before calling `setTextStyle`.