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.
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.