Custom Font List
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:
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:
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:
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.
How is this guide?