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 { FontCategory, UniverUIPlugin } from '@univerjs/ui'univer.registerPlugin(UniverUIPlugin, {  container: 'app',  customFontFamily: {    list: [      {        value: 'Inter',        label: 'Inter',        category: FontCategory.SANS_SERIF,      },      {        value: 'Noto Serif',        label: 'Noto Serif',        category: FontCategory.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
import { FontCategory } from '@univerjs/ui'univerAPI.addFonts([  {    value: 'Inter',    label: 'Inter',    category: FontCategory.SANS_SERIF,  },])

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

How is this guide?

© 2026 DreamNum Co., Ltd.