FontFamilyConfig (font)
@ckeditor/ckeditor5-font/src/fontfamily
The configuration of the font family feature.
This option is used by the FontFamilyEditing
feature.
ClassicEditor
.create( {
fontFamily: ... // Font family feature configuration.
} )
.then( ... )
.catch( ... );
See all editor options.
Filtering
Properties
-
options : Array.<(String | FontFamilyOption)>
Available font family options defined as an array of strings. The default value is:
const fontFamilyConfig = { 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' ] };
which configures 8 font family options. Each option consists of one or more comma–separated font family names. The first font name is used as the dropdown item description in the UI.
Note: The family names that consist of spaces should not have quotes (as opposed to the CSS standard). The necessary quotes will be added automatically in the view. For example, the
"Lucida Sans Unicode"
will render as follows:<span style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif">...</span>
The "default" option removes the
fontFamily
attribute from the selection. In such case, the text will be rendered in the view using the default font family defined in the styles of the web page.Font family can be applied using the command API. To do that, use the
fontFamily
command and pass the desired family as avalue
. For example, the following code will apply thefontFamily
attribute with the'Arial'
value
to the current selection:editor.execute( 'fontFamily', { value: 'Arial' } );
Executing the
'fontFamily'
command without any value will remove thefontFamily
attribute from the current selection.