FontFamily extension
This extension enables you to set the font family in the editor. It uses the TextStyle mark, which renders a <span> tag. The font family is applied as inline style, for example <span style="font-family: Arial">.
Heads-up!
Be aware that editor.isActive('textStyle', { fontFamily: 'Font Family' }) will return the font family as set by the browser's CSS rules and not as you would have expected when setting the font family.
Install
npm install @tiptap/extension-text-style @tiptap/extension-font-family
This extension requires the TextStyle mark.
Settings
types
A list of marks to which the font family attribute should be applied to.
Default: ['textStyle']
FontFamily.configure({
types: ['textStyle'],
})
Commands
setFontFamily()
Applies the given font family as inline style.
editor.commands.setFontFamily('Inter')
unsetFontFamily()
Removes any font family.
editor.commands.unsetFontFamily()