title: Font family
{@snippet features/build-font-family-source}
The {@link module:font/fontfamily~FontFamily} feature enables support for setting font family.
{@snippet features/font-family}
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 keyword 'default' to use the default font-family defined in the web page styles.
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: [
'headings', 'bulletedList', 'numberedList', 'fontFamily', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
{@snippet features/custom-font-family-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 FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ FontFamily, ... ],
toolbar: [ 'fontFamily', ... ]
} )
.then( ... )
.catch( ... );
Read more about {@link builds/guides/development/installing-plugins installing plugins}.
The {@link module:font/fontfamily~FontFamily} plugin registers:
'fontFamily' dropdown,The '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 passed to family corresponds 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 a value:
'Arial''Courier New''Georgia''Lucida Sans Unicode''Tahoma''Times New Roman''Trebuchet MS''Verdana'passing an empty value will remove any fontFamily (default):
editor.execute( 'fontFamily' );
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.