---
title: "FontFamily extension"
description: "Set custom font families using the Font Family extension in your Tiptap Editor. Learn more in our documentation."
canonical_url: "https://tiptap.dev/docs/editor/extensions/functionality/fontfamily"
---

# FontFamily extension

Set custom font families using the Font Family extension in your Tiptap Editor. Learn more in our documentation.

This extension enables you to set the font family in the editor. It uses the [`TextStyle`](https://tiptap.dev/docs/editor/extensions/marks/text-style.md) mark, which renders a `<span>` tag. The font family is applied as inline style, for example `<span style="font-family: Arial">`.

> **Interactive demo:** [FontFamily](https://embed.tiptap.dev/preview/Extensions/FontFamily)

> **Heads-up!:**
>
> Be aware that `editor.isActive('textStyle', { fontFamily: 'Font Family' })` will return the font family as set by the [browser's CSS rules](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#family-name) and not as you would have expected when setting the font family.

## Install

```bash
npm install @tiptap/extension-text-style
```

This extension requires the [`TextStyle`](https://tiptap.dev/docs/editor/extensions/marks/text-style.md) mark.

```ts
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.

```ts
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']`

```js
FontFamily.configure({
  types: ['textStyle'],
})
```

## Commands

### setFontFamily()

Applies the given font family as inline style.

```js
editor.commands.setFontFamily('Inter')
```

### unsetFontFamily()

Removes any font family.

```js
editor.commands.unsetFontFamily()
```

## Source code

[packages/extension-text-style/src/font-family/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/src/font-family)

## Minimal Install

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

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