2021-10-14 06:13:50 +08:00
---
2021-10-16 04:48:57 +08:00
description: Doesn’ t have support for Comic Sans, but for all other fonts.
2021-10-14 06:13:50 +08:00
---
2020-11-06 23:06:36 +08:00
# FontFamily
2021-01-25 17:35:52 +08:00
[![Version ](https://img.shields.io/npm/v/@tiptap/extension-font-family.svg?label=version )](https://www.npmjs.com/package/@tiptap/extension-font-family)
[![Downloads ](https://img.shields.io/npm/dm/@tiptap/extension-font-family.svg )](https://npmcharts.com/compare/@tiptap/extension-font-family?minimal=true)
2020-11-12 23:36:29 +08:00
This extension enables you to set the font family in the editor. It uses the [`TextStyle` ](/api/marks/text-style ) mark, which renders a `<span>` tag. The font family is applied as inline style, for example `<span style="font-family: Arial">` .
2020-11-06 23:06:36 +08:00
## Installation
```bash
2020-11-06 23:12:53 +08:00
npm install @tiptap/extension -text-style @tiptap/extension -font-family
2020-11-06 23:06:36 +08:00
```
2021-02-12 22:02:40 +08:00
This extension requires the [`TextStyle` ](/api/marks/text-style ) mark.
2020-11-06 23:12:53 +08:00
## Settings
2021-10-02 07:20:09 +08:00
### types
A list of marks to which the font family attribute should be applied to.
Default: `['textStyle']`
```js
FontFamily.configure({
types: ['textStyle'],
})
```
2020-11-12 23:36:29 +08:00
## Commands
2021-10-02 07:20:09 +08:00
### setFontFamily()
Applies the given font family as inline style.
```js
editor.commands.setFontFamily('Inter')
```
### unsetFontFamily()
Removes any font family.
```js
editor.commands.unsetFontFamily()
```
2020-11-06 23:12:53 +08:00
2020-11-06 23:06:36 +08:00
## Source code
2021-04-21 21:31:11 +08:00
[packages/extension-font-family/ ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/ )
2020-11-06 23:06:36 +08:00
## Usage
2021-10-19 00:01:47 +08:00
https://embed.tiptap.dev/preview/Extensions/FontFamily