Custom Font List

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

TypeScript
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:

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

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

How is this guide?

© 2026 DreamNum Co., Ltd.