# Custom Font List

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

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

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

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

---

The Slides text editor uses Univer’s shared font list for its font-family dropdown. Configure that application-level list on `UniverUIPlugin`.

## Configure font choices

```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,
  },
})
```

`value` is written as the text run’s font family. `label` is the displayed text or an i18n key, and `category` optionally groups the choice.

Load each browser font yourself with `@font-face` or a stylesheet. Adding a name to the list does not download a font file; if the family is unavailable, the browser uses a fallback.

## Facade API

After the UI Facade has loaded, append font choices at runtime with `addFonts`:

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

This updates the shared dropdown immediately and does not load the corresponding font bytes.