title: Font size
{@snippet features/build-font-size-source}
The {@link module:font/fontsize~FontSize} feature enables support for setting font size.
{@snippet features/font-size}
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 keyword 'normal' to use the default font size defined in the web page styles — it disables the font-size feature.
The font size feature supports two ways of defining 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>
An example of the editor that supports only two font sizes:
ClassicEditor
.create( document.querySelector( '#editor' ), {
fontSize: {
options: [
'tiny',
'normal',
'big'
]
},
toolbar: [
'headings', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
{@snippet features/custom-font-size-named-options}
As an alternative, the font feature supports numeric values.
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's an example of the editor that supports numeric font sizes (assuming that the 'normal' size is defined by CSS as 15px):
ClassicEditor
.create( document.querySelector( '#editor' ), {
fontSize: {
options: [
9,
11,
13,
'normal',
17,
19,
21
]
},
toolbar: [
'headings', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
{@snippet features/custom-font-size-numeric-options}
To add this feature to your editor install the @ckeditor/ckeditor5-font package:
npm install --save @ckeditor/ckeditor5-font
And add it to your plugin list and the toolbar configuration:
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ FontSize, ... ],
toolbar: [ 'fontSize', ... ]
} )
.then( ... )
.catch( ... );
Read more about {@link builds/guides/development/installing-plugins installing plugins}.
The {@link module:font/fontsize~FontSize} plugin registers the following components:
'fontSize' dropdown,The '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 numeric 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 source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.