Sign up (with export icon)

FontFamilyConfig

Api-interface icon interface

The configuration of the font family feature. This option is used by the FontFamilyEditing feature.

ClassicEditor
	.create( {
		fontFamily: ... // Font family feature configuration.
	} )
	.then( ... )
	.catch( ... );
Copy code

See all editor options.

Properties

  • Chevron-right icon

    options : Array<string | FontFamilyOption> | undefined

    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'
    	]
    };
    
    Copy code

    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>
    
    Copy code

    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 a value. For example, the following code will apply the fontFamily attribute with the 'Arial' value to the current selection:

    editor.execute( 'fontFamily', { value: 'Arial' } );
    
    Copy code

    Executing the 'fontFamily' command without any value will remove the fontFamily attribute from the current selection.

  • Chevron-right icon

    supportAllValues : boolean | undefined

    By default the plugin removes any font-family value that does not match the plugin's configuration. It means that if you paste content with font families that the editor does not understand, the font-family attribute will be removed and the content will be displayed with the default font.

    You can preserve pasted font family values by switching the supportAllValues option to true:

    const fontFamilyConfig = {
    	supportAllValues: true
    };
    
    Copy code

    With this configuration font families not specified in the editor configuration will not be removed when pasting the content.