# Font family, size, and color

The font feature lets you change the font family, size, color, and background color. These are four separate plugins, so you can enable only the ones you need.

<a id="demo">

## Demo

Use the toolbar dropdowns in the demo below to control the font size and font family . You can also change both the font color and the font background color with predefined palette or color picker .

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="additional-feature-information">

## Additional feature information

The font styles, just like the [basic text styles](basic-styles.md), can serve many purposes. You can apply the font size setting globally or to a selected part of the text to make it catch the eye of the reader. Using different font families can help differentiate between sections of the content that serve various purposes (like main text and a side quotation or a recap). Different font colors can work as markers and guides just like font background colors that stand out even more and draw attention.

The plugin enables the following features in the rich-text editor:

* [`FontFamily`](../api/module_font_fontfamily-FontFamily.md) – Change the font family by applying inline `<span>` elements with a `font-family` in the `style` attribute.
* [`FontSize`](../api/module_font_fontsize-FontSize.md) – Control the font size by applying inline `<span>` elements that either have a CSS class or a `font-size` in the `style` attribute.
* [`FontColor`](../api/module_font_fontcolor-FontColor.md) – Control the font color by applying inline `<span>` elements with a `color` in the `style` attribute.
* [`FontBackgroundColor`](../api/module_font_fontbackgroundcolor-FontBackgroundColor.md) – Control the font background color by applying inline `<span>` elements with a `background-color` in the `style` attribute.

> **Note**
>
> You can remove all font formatting with the [remove format](remove-format.md) feature.

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, Font } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Font, /* ... */ ],
		toolbar: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', /* ... */ ]
		fontFamily: {
			// Configuration.
		}
		fontColor: {
			// Configuration.
		}
		// ...
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Font } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Font, /* ... */ ],
		toolbar: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', /* ... */ ]
		fontFamily: {
			// Configuration.
		}
		fontColor: {
			// Configuration.
		}
		// ...
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

You can also add just one or a selected few of the font features to your plugin list and the toolbar configuration:

**NPM**

```js
import { ClassicEditor, FontFamily } from 'ckeditor5';

ClassicEditor
	.create( {
		plugins: [ FontFamily, /* ... */ ],
		toolbar: [ 'fontFamily', /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, FontFamily } = CKEDITOR;

ClassicEditor
	.create( {
		plugins: [ FontFamily, /* ... */ ],
		toolbar: [ 'fontFamily', /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuring-the-font-family-feature">

## Configuring the font family feature

You can configure which font family options are supported by the WYSIWYG editor. Use the [`config.fontFamily.options`](../api/module_font_fontconfig-FontFamilyConfig.md#member-options) configuration option to do so.

Use the special `'default'` keyword to use the default font family defined in the web page styles. It removes any custom font family.

For example, the following editor supports two font families besides the default one:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		fontFamily: {
			options: [
				'default',
				'Ubuntu, Arial, sans-serif',
				'Ubuntu Mono, Courier New, Courier, monospace'
			]
		},
		toolbar: [
			'heading', 'bulletedList', 'numberedList', 'fontFamily', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="accepting-all-font-names">

### Accepting all font names

By default, all `font-family` values that are not specified in the `config.fontFamily.options` are stripped. You can enable support for all font names by using the [`config.fontFamily.supportAllValues`](../api/module_font_fontconfig-FontFamilyConfig.md#member-supportAllValues) option.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		fontFamily: {
			options: [
				// Font family configuration options are described in the "Configuring the font family feature" section.
				// ...
			],
			supportAllValues: true
		},
		// More of editor's configuration.
		// ...
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuring-the-font-size-feature">

## Configuring the font size feature

It is possible to configure which font size options are supported by the WYSIWYG editor. Use the [`config.fontSize.options`](../api/module_font_fontconfig-FontSizeConfig.md#member-options) configuration option to do so.

Use the special `'default'` keyword to use the default font size defined in the web page styles. It removes any custom font size.

The font size feature supports two ways of defining the configuration: using predefined (named) presets or simple numeric values.

<a id="using-the-predefined-presets">

### Using the predefined presets

The font size feature defines 4 named presets:

* `'tiny'`
* `'small'`
* `'big'`
* `'huge'`

Each size is represented in the view as a `<span>` element with the `text-*` class. For example, the `'tiny'` preset looks as follows in the editor data:

```html
<span class="text-tiny">...</span>
```

The CSS definition for the classes (presets) must be included in the web page styles where the edited content is rendered.

Here is an example of the font size CSS classes:

```css
.ck-content .text-tiny {
	font-size: 0.7em;
}

.ck-content .text-small {
	font-size: 0.85em;
}

.ck-content .text-big {
	font-size: 1.4em;
}

.ck-content .text-huge {
	font-size: 1.8em;
}
```

An example of an editor that supports two font sizes:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		fontSize: {
			options: [
				'tiny',
				'default',
				'big'
			]
		},
		toolbar: [
			'heading', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="using-numerical-values">

### Using numerical values

The font size feature also supports numerical values.

In this case, each size is represented in the view as a `<span>` element with the `font-size` style set in `px`. For example, `14` will be represented in the editor data as:

```html
<span style="font-size: 14px">...</span>
```

Here is an example of the WYSIWYG editor that supports numerical font sizes. Note that `'default'` is controlled by the default styles of the web page:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		fontSize: {
			options: [
				9,
				11,
				13,
				'default',
				17,
				19,
				21
			]
		},
		toolbar: [
			'heading', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="accepting-all-font-sizes">

### Accepting all font sizes

By default, all `font-size` values that are not specified in the `config.fontSize.options` are stripped. You can enable support for all font sizes by using the [`config.fontSize.supportAllValues`](../api/module_font_fontconfig-FontSizeConfig.md#member-supportAllValues) option.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		fontSize: {
			options: [
				// Numerical values.
				// ...
			],
			supportAllValues: true
		},
		// More of editor's configuration.
		// ...
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

> **Note**
>
> This option can be used only in combination with [numerical values](#using-numerical-values).

<a id="configuring-the-font-color-and-font-background-color-features">

## Configuring the font color and font background color features

Both font color and font background color features are configurable and share the same configuration format.

> **Note**
>
> Please note that [font color](../api/module_font_fontcolor-FontColor.md) and [font background color](../api/module_font_fontbackgroundcolor-FontBackgroundColor.md) are separate plugins. They must be enabled and configured individually.

Check out the WYSIWYG editor below with both features customized using the editor configuration:

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="specifying-available-colors">

### Specifying available colors

It is possible to configure which colors are available in the color dropdown. Use the [`config.fontColor.colors`](../api/module_font_fontconfig-FontColorConfig.md#member-colors) and [`config.fontBackgroundColor.colors`](../api/module_font_fontconfig-FontColorConfig.md#member-colors) configuration options to do so.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		fontColor: {
			colors: [
				{
					color: 'hsl(0, 0%, 0%)',
					label: 'Black'
				},
				{
					color: 'hsl(0, 0%, 30%)',
					label: 'Dim grey'
				},
				{
					color: 'hsl(0, 0%, 60%)',
					label: 'Grey'
				},
				{
					color: 'hsl(0, 0%, 90%)',
					label: 'Light grey'
				},
				{
					color: 'hsl(0, 0%, 100%)',
					label: 'White',
					hasBorder: true
				},
				// More colors.
				// ...
			]
		},
		fontBackgroundColor: {
			colors: [
				{
					color: 'hsl(0, 75%, 60%)',
					label: 'Red'
				},
				{
					color: 'hsl(30, 75%, 60%)',
					label: 'Orange'
				},
				{
					color: 'hsl(60, 75%, 60%)',
					label: 'Yellow'
				},
				{
					color: 'hsl(90, 75%, 60%)',
					label: 'Light green'
				},
				{
					color: 'hsl(120, 75%, 60%)',
					label: 'Green'
				},
				// More colors.
				// ...
			]
		},
		toolbar: [
			'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="changing-the-geometry-of-the-color-grid">

### Changing the geometry of the color grid

You can configure the number of columns in the color dropdown by setting the [`config.fontColor.columns`](../api/module_font_fontconfig-FontColorConfig.md#member-columns) and [`config.fontBackgroundColor.columns`](../api/module_font_fontconfig-FontColorConfig.md#member-columns) configuration options.

Usually, you will want to use this option when changing the number of [available colors](#specifying-available-colors).

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		fontColor: {
			colors: [
				// 9 colors defined here.
				// ...
			]

			columns: 3, // So, you can display them in 3 columns.

			// Optional configuration of the number of document colors.
			// ...
		},
		fontBackgroundColor: {
			columns: 6,
			// Background color options.
			// ...
		},
		toolbar: [
			'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="documents-colors">

### Documents colors

The font and font background color dropdowns contain the “Document colors” section. It lists the colors already used in the document for the users to be able to easily reuse them (for consistency purposes).

By default, the number of displayed document colors is limited to one row, but you can adjust it (or remove the whole section) by using the [`config.fontColor.documentColors`](../api/module_font_fontconfig-FontColorConfig.md#member-documentColors) or [`config.fontBackgroundColor.documentColors`](../api/module_font_fontconfig-FontColorConfig.md#member-documentColors) options.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		fontColor: {
			// Display 6 columns in the color grid.
			columns: 6,

			// And 12 document colors (2 rows of them).
			documentColors: 12,

			// Optional available font colors configuration.
			// ...
		},
		fontBackgroundColor: {
			// Remove the "Document colors" section.
			documentColors: 0,

			// Background color options.
			// ...
		},
		toolbar: [
			'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="color-picker">

### Color picker

You can set colors from outside of the pre-configured palette using the “Color picker” option available at the bottom of the color selection dropdown.

Color picker applies colors in the **HSL** format as it is the default for the font color feature. You can change this using the [`config.fontColor.colorPicker.format`](../api/module_ui_colorpicker_utils-ColorPickerConfig.md) option. Available color formats are defined in the [`ColorPickerOutputFormat`](../api/module_ui_colorpicker_utils-ColorPickerOutputFormat.md) type. This change will not affect the color input – it always accepts only values given in the `hex` format (with or without the `#` sign at the beginning).

To turn off the color picker entirely for the given feature, set the [`config.fontColor.colorPicker`](../api/module_font_fontconfig-FontColorConfig.md#member-colorPicker) (or [`config.fontBackgroundColor.colorPicker`](../api/module_font_fontconfig-FontColorConfig.md#member-colorPicker)) option to `false`.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		fontColor: {
			colorPicker: {
				// Use 'hex' format for output instead of 'hsl'.
				format: 'hex'
			}
		},
		fontBackgroundColor: {
			// Do not display the color picker.
			colorPicker: false
		},
		toolbar: [
			'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="email-client-color-format-compatibility">

### Email client color format compatibility

When designing content for emails, it is important to be aware that many email clients have limited support for various color formats. For maximum compatibility in email templates, consider the following limitations:

<a id="unsupported-color-formats-in-most-email-clients">

#### Unsupported color formats in most email clients:

* hsl
* hsla
* hwb
* lab
* lch
* oklab
* oklch
* color-mix
* rgba

<a id="recommended-color-formats-for-email-compatibility">

#### Recommended color formats for email compatibility:

* Hexadecimal (for example, `#FF0000`)
* RGB (for example, `rgb(255, 0, 0)`)
* Named colors (for example, `red`)

Using these compatible formats will ensure your content displays consistently across different email clients.

<a id="related-features">

## Related features

Here are some more CKEditor 5 features that can help you format your content:

* [Basic text styles](basic-styles.md) – The essentials, like **bold**, _italic_, and others.
* [Styles](style.md) – Apply pre-configured styles to existing elements in the editor content.
* [Text alignment](text-alignment.md) – Because it does matter whether the content is left, right, centered, or justified.
* [Case change](case-change.md) – Turn a text fragment or block into uppercase, lowercase, or title case.
* [Headings](headings.md) – Divide your content into sections.
* [Highlight](highlight.md) – Mark important words and passages, aiding a review or drawing attention to specific parts of the content.
* [Format painter](format-painter.md) – Easily copy text formatting and apply it in a different place in the edited document.
* [Remove format](remove-format.md) – Easily clean basic text formatting.

<a id="common-api">

## Common API

The [`FontFamily`](../api/module_font_fontfamily-FontFamily.md) plugin registers the following components:

* The `'fontFamily'` dropdown.

* The [`'fontFamily'`](../api/module_font_fontfamily_fontfamilycommand-FontFamilyCommand.md) command.

  The number of options and their names correspond to the [`config.fontFamily.options`](../api/module_font_fontconfig-FontFamilyConfig.md#member-options) configuration option.

  You can change the font family of the current selection by executing the command with a desired value:

  ```js
  editor.execute( 'fontFamily', { value: 'Arial' } );
  ```

  The `value` must correspond to the first font name in the configuration string. For the following default configuration:

  ```js
  fontFamily.options = [
  	'default',
  	'Arial, Helvetica, sans-serif',
  	'Courier New, Courier, monospace',
  	'Georgia, serif',
  	'Lucida Sans Unicode, Lucida Grande, sans-serif',
  	'Tahoma, Geneva, sans-serif',
  	'Times New Roman, Times, serif',
  	'Trebuchet MS, Helvetica, sans-serif',
  	'Verdana, Geneva, sans-serif'
  ]
  ```

  the `'fontFamily'` command will accept the corresponding strings as values:

  * `'Arial'`
  * `'Courier New'`
  * `'Georgia'`
  * `'Lucida Sans Unicode'`
  * `'Tahoma'`
  * `'Times New Roman'`
  * `'Trebuchet MS'`
  * `'Verdana'`

  Note that passing an empty value will remove the `fontFamily` attribute from the selection (`default`):

  ```js
  editor.execute( 'fontFamily' );
  ```

The [`FontSize`](../api/module_font_fontsize-FontSize.md) plugin registers the following components:

* The `'fontSize'` dropdown.

* The [`'fontSize'`](../api/module_font_fontsize_fontsizecommand-FontSizeCommand.md) command.

  The number of options and their names correspond to the [`config.fontSize.options`](../api/module_font_fontconfig-FontSizeConfig.md#member-options) configuration option.

  You can change the font size of the current selection by executing the command with a desired value:

  ```js
  // For numerical values:
  editor.execute( 'fontSize', { value: 10 } );

  // For named presets:
  editor.execute( 'fontSize', { value: 'small' } );
  ```

  Passing an empty value will remove any `config.fontSize` set:

  ```js
  editor.execute( 'fontSize' );
  ```

The [`FontColor`](../api/module_font_fontcolor-FontColor.md) plugin registers the following components:

* The `'fontColor'` dropdown.

* The [`'fontColor'`](../api/module_font_fontcolor_fontcolorcommand-FontColorCommand.md) command.

  You can change the font color of the current selection by executing the command with a desired value:

  ```js
  editor.execute( 'fontColor', { value: 'rgb(30, 188, 97)' } );
  ```

  Passing an empty value will remove the font color from the selection:

  ```js
  editor.execute( 'fontColor' );
  ```

The [`FontBackgroundColor`](../api/module_font_fontbackgroundcolor-FontBackgroundColor.md) plugin registers the following components:

* The `'fontBackgroundColor'` dropdown.

* The [`'fontBackgroundColor'`](../api/module_font_fontbackgroundcolor_fontbackgroundcolorcommand-FontBackgroundColorCommand.md) command.

  You can change the font background color of the current selection by executing the command with a desired value:

  ```js
  editor.execute( 'fontBackgroundColor', { value: 'rgb(30, 188, 97)' } );
  ```

  Passing an empty value will remove the font background color from the selection:

  ```js
  editor.execute( 'fontBackgroundColor' );
  ```

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

<a id="content-compatibility">

## Content compatibility

The [`Font`](../api/module_font_font-Font.md) plugin provides basic support for the deprecated `<font>` tag.

While `<font color>` is always supported, to use `<font face>` and `<font size>` you need to enable the [`config.fontFamily.supportAllValues`](../api/module_font_fontconfig-FontFamilyConfig.md#member-supportAllValues) and [`config.fontSize.supportAllValues`](../api/module_font_fontconfig-FontSizeConfig.md#member-supportAllValues) options respectively.

Text formatted with `<font>` is accepted by the plugin, but the editor always returns the markup in a modern format, so the transformation is one way.

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-font>.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)