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

This extension requires the TextStyle mark.

import { Editor } from '@tiptap/core'
import { TextStyle, FontFamily } from '@tiptap/extension-text-style'

new Editor({
  extensions: [TextStyle, FontFamily],
})

This extension is installed by default with the TextStyleKit extension, so you don’t need to install it separately.

import { Editor } from '@tiptap/core'
import { TextStyleKit } from '@tiptap/extension-text-style'

new Editor({
  extensions: [TextStyleKit],
})

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()

Source code

packages/extension-text-style/src/font-family/

Minimal Install

import { Editor } from '@tiptap/core'
import { FontFamily } from '@tiptap/extension-text-style/font-family'

new Editor({
  extensions: [FontFamily],
})