---
title: "FontSize extension"
description: "Set custom font size using the Font Size extension in your Tiptap Editor. Learn more in our documentation."
canonical_url: "https://tiptap.dev/docs/editor/extensions/functionality/fontsize"
---

# FontSize extension

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

This extension enables you to set the font size 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 size is applied as inline style, for example `<span style="font-size: 14px">`.

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

## 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, FontSize } from '@tiptap/extension-text-style'

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

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
FontSize.configure({
  types: ['textStyle'],
})
```

## Commands

### setFontSize()

Applies the given font family as inline style.

```js
editor.commands.setFontSize('14px')
```

### unsetFontSize()

Removes any font family.

```js
editor.commands.unsetFontSize()
```

## Source code

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

## Minimal Install

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

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