Skip to main content

Custom Fonts

Overview​

Kritzel has a dedicated custom-font system for text objects on the canvas and for the editor UI. Fonts can come from Google Fonts, another hosted stylesheet, or a self-hosted source.

Registering Custom Fonts​

Register fonts declaratively with the customFonts prop on <KritzelEditor> or programmatically with registerFonts() through a typed editor ref. Registered fonts immediately become available to the text tool and can also be used by the editor UI.

Using a Custom Font in the UI​

Register the font first, then set global.fontFamily in a theme to apply it to menus, dialogs, buttons, and other controls. To override only a specific component, set its component-level theme property, such as dialog.fontFamily or contextMenu.fontFamily.

API Details​