title: Font
{@snippet features/build-font-source}
The {@link module:font/font~Font} plugin enables the following features in the editor:
<span> elements with a font-family in the style attribute.<span> elements that either have a CSS class or a font-size in the style attribute.<span> elements with a color in the style attribute.<span> elements with a background-color in the style attribute.{@snippet features/font}
It is possible to configure which font family options are supported by the editor. Use the {@link module:font/fontfamily~FontFamilyConfig#options fontFamily.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 only two font families besides the default one:
ClassicEditor
.create( document.querySelector( '#editor' ), {
fontFamily: {
options: [
'default',
'Ubuntu, Arial, sans-serif',
'Ubuntu Mono, Courier New, Courier, monospace'
]
},
toolbar: [
'heading', 'bulletedList', 'numberedList', 'fontFamily', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
{@snippet features/custom-font-family-options}
It is possible to configure which font size options are supported by the editor. Use the {@link module:font/fontsize~FontSizeConfig#options fontSize.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.
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:
<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:
.text-tiny {
font-size: 0.7em;
}
.text-small {
font-size: 0.85em;
}
.text-big {
font-size: 1.4em;
}
.text-huge {
font-size: 1.8em;
}
An example of the editor that supports only two font sizes:
ClassicEditor
.create( document.querySelector( '#editor' ), {
fontSize: {
options: [
'tiny',
'default',
'big'
]
},
toolbar: [
'heading', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
{@snippet features/custom-font-size-named-options}
The font 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:
<span style="font-size: 14px">...</span>
Here is an example of the editor that supports numerical font sizes. Note that 'default' is controlled by the default styles of the web page:
ClassicEditor
.create( document.querySelector( '#editor' ), {
fontSize: {
options: [
9,
11,
13,
'default',
17,
19,
21
]
},
toolbar: [
'heading', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
{@snippet features/custom-font-size-numeric-options}
Both font color and font background color features are configurable and share the same configuration format.
Please note that {@link module:font/fontcolor~FontColor font color} and {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} are separate plugins. They must be enabled and configured individually.
Check out the editor below with both features customized using the editor configuration:
{@snippet features/custom-font-color-and-background-color-options}
It is possible to configure which colors are available in the color dropdown. Use the {@link module:font/fontcolor~FontColorConfig#colors fontColor.colors} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#colors fontBackgroundColor.colors} configuration options to do so.
ClassicEditor
.create( document.querySelector( '#editor' ), {
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
},
// ...
]
},
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'
},
// ...
]
},
toolbar: [
'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
It is also possible to configure in how many columns the colors in the grid are displayed. Use the {@link module:font/fontcolor~FontColorConfig#columns fontColor.columns} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns fontBackgroundColor.columns} options to do so.
ClassicEditor
.create( document.querySelector( '#editor' ), {
fontColor: {
columns: 3,
// ...
},
fontBackgroundColor: {
columns: 6,
// ...
},
toolbar: [
'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
Plugin contains special section with document colors. In this additional grid are presented colors found in currently edited document. Colors are read from the beginning of document to its end. Duplicated colors are not inserted multiple times. Only limited number of colors is displayed in this grid. You can mange how many document colors is displayed by changing {@link module:font/fontcolor~FontColorConfig#documentColors fontColor.documentColors} or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#documentColors fontBackgroundColor.documentColors} value. By default its value equals to {@link module:font/fontcolor~FontColorConfig#columns fontColor.columns} or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns fontBackgroundColor.columns}. This results with one row of document colors available in dropdown.
Setting documentColors value to 0 will disable this feature.
If edited document doesn't contain any font color or background colors, then document colors section will be hidden until text with proper color value appear.
ClassicEditor
.create( document.querySelector( '#editor' ), {
fontColor: {
documentColors: 10,
// ...
},
fontBackgroundColor: {
documentColors: 0, // disables feature
// ...
},
toolbar: [
'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
To add this feature to your editor, install the @ckeditor/ckeditor5-font package:
npm install --save @ckeditor/ckeditor5-font
Then add it to your plugin list and the toolbar configuration:
import Font from '@ckeditor/ckeditor5-font/src/font';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Font, ... ],
toolbar: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', ... ]
} )
.then( ... )
.catch( ... );
You can also add just one or a selected few of the font features to your plugin list and the toolbar configuration:
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ FontFamily, ... ],
toolbar: [ 'fontFamily', ... ]
} )
.then( ... )
.catch( ... );
Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
The {@link module:font/fontfamily~FontFamily} plugin registers the following components:
'fontFamily' dropdown.The {@link module:font/fontfamily/fontfamilycommand~FontFamilyCommand 'fontFamily'} command.
The number of options and their names correspond to the {@link module:font/fontfamily~FontFamilyConfig#options fontFamily.options} configuration option.
You can change the font family of the current selection by executing the command with a desired value:
editor.execute( 'fontFamily', { value: 'Arial' } );
The value must correspond to the first font name in the configuration string. For the following default configuration:
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):
editor.execute( 'fontFamily' );
The {@link module:font/fontsize~FontSize} plugin registers the following components:
'fontSize' dropdown.The {@link module:font/fontsize/fontsizecommand~FontSizeCommand 'fontSize'} command.
The number of options and their names correspond to the {@link module:font/fontsize~FontSizeConfig#options fontSize.options} configuration option.
You can change the font size of the current selection by executing the command with a desired value:
// For numerical values:
editor.execute( 'fontSize', { value: 10 } );
// For named presets:
editor.execute( 'fontSize', { value: 'small' } );
Passing an empty value will remove any fontSize set:
editor.execute( 'fontSize' );
The {@link module:font/fontcolor~FontColor} plugin registers the following components:
'fontColor' dropdown.The {@link module:font/fontcolor/fontcolorcommand~FontColorCommand 'fontColor'} command.
You can change the font color of the current selection by executing the command with a desired value:
editor.execute( 'fontColor', { value: 'rgb(30, 188, 97)' } );
Passing an empty value will remove the font color from the selection:
editor.execute( 'fontColor' );
The {@link module:font/fontbackgroundcolor~FontBackgroundColor} plugin registers the following components:
'fontBackgroundColor' dropdown.The {@link module:font/fontbackgroundcolor/fontbackgroundcolorcommand~FontBackgroundColorCommand 'fontBackgroundColor'} command.
You can change the font background color of the current selection by executing the command with a desired value:
editor.execute( 'fontBackgroundColor', { value: 'rgb(30, 188, 97)' } );
Passing an empty value will remove the font background color from the selection:
editor.execute( 'fontBackgroundColor' );
We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} 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.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.