CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

guideFont

The Font plugin provides extended text formatting options for the document content.

The font styles, just like the basic text styles can serve numerous purposes. Font size setting can be applied globally or to a selected part of the text only making it catch the eye of the reader. Using different font families can help differentiate between sections of the content that serve various purposes (e.g. main text and a side quotation or a recap). Different font colors can work as markers and guides just like font background colors, that stand out even more and draw attention.

The plugin enables the following features in the rich-text editor:

  • FontFamily – Allows to change the font family by applying inline <span> elements with a font-family in the style attribute.
  • FontSize – Allows to control the font size by applying inline <span> elements that either have a CSS class or a font-size in the style attribute.
  • FontColor – Allows to control the font color by applying inline <span> elements with a color in the style attribute.
  • FontBackgroundColor – Allows to control the font background color by applying inline <span> elements with a background-color in the style attribute.

All font formatting can be removed with the remove format feature.

The font styles feature is enabled by default in the #document-editor document editor build only. See the installation section to learn how to enable it in your editor.

# Demo

Use the toolbar dropdowns in the demo below to control font size Font size and font family Font family. You can also change both the font color Font color and font background color Font background color.

The message that we want to put through is the most important part of any document. But how we do it, plays also a great role in the way the message will be conveyed. Fonts faces, sizes, and colors may radically change the way the reader perceives and ingests the content.

Sans-serif fonts, like Arial or Verdana, are universally used in electronic publications intended to be read on-screen due to the nature of electronic displays.

Serif font families are traditionally used in print media, making reading from paper easier and faster. The basic print text is usually black on white, but modern printing techniques and electronic media made room for a more diverse approach to color in documents. 

Monospaced fonts, like Courier, are often associated with computer terminals and are usually used to represent code listings and machine printouts.

Font colors and background colors are used to draw attention and highlight parts of the text, but should be used with caution, as using similar colors may produce unreadable results. A properly chosen set, however, will greatly improve text visibility and readability and may be used as an accessibility aid.

Custom text and background colors may be used to create infoboxes or quotations.

Text size may also play important role in driving the reader's attention.

Large text size would generally be used for important data, something, that really needs to stick out.

Fine print and tiny letters would rather provide some additional information, not necessarily the most important or interesting. Or one that we do not want to expose too much for some reason.

Here are some more CKEditor 5 features that can help you format your content:

  • Basic text styles – The essentials, like bold, italic and others.
  • Text alignment – Because it does matter whether the content is left, right, centered or justified.
  • Headings – Divide your content into sections.
  • Highlight – Mark important words and passages, aiding a review or drawing attention to specific parts of content.
  • Remove format – Easily clean basic text formatting.

# Configuring the font family feature

It is possible to configure which font family options are supported by the WYSIWYG editor. Use the config.fontFamily.options configuration option to do so.

Use the special 'default' keyword to use the default font family defined in the web page styles. It removes any custom font family.

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: [
            'heading', 'bulletedList', 'numberedList', 'fontFamily', 'undo', 'redo'
        ]
    } )
    .then( ... )
    .catch( ... );

This text has the "Ubuntu, Arial, sans-serif" font family set.

This text has the "Ubuntu Mono, Courier New, Courier, monospace" font family set.

# Accepting all font names

By default, all font-family values that are not specified in the config.fontFamily.options are stripped. You can enable support for all font names by using the config.fontFamily.supportAllValues option.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontFamily: {
            options: [
                // ...
            ],
            supportAllValues: true
        },
        // ...
    } )
    .then( ... )
    .catch( ... );

# Configuring the font size feature

It is possible to configure which font size options are supported by the WYSIWYG editor. Use the config.fontSize.options configuration option to do so.

Use the special 'default' keyword to use the default font size defined in the web page styles. It removes any custom font size.

The font size feature supports two ways of defining the configuration: using predefined (named) presets or simple numeric values.

# Using the predefined presets

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>

The CSS definition for the classes (presets) must be included in the web page styles where the edited content is rendered.

Here is an example of the font size CSS classes:

.ck-content .text-tiny {
    font-size: 0.7em;
}

.ck-content .text-small {
    font-size: 0.85em;
}

.ck-content .text-big {
    font-size: 1.4em;
}

.ck-content .text-huge {
    font-size: 1.8em;
}

An example of the editor that supports only two font sizes:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontSize: {
            options: [
                'tiny',
                'default',
                'big'
            ]
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
        ]
    } )
    .then( ... )
    .catch( ... );

This is a mixed text with different font sizes: small and big

# Using numerical values

The font size feature also supports numerical values.

In this case, 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 is an example of the WYSIWYG editor that supports numerical font sizes. Note that 'default' is controlled by the default styles of the web page:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontSize: {
            options: [
                9,
                11,
                13,
                'default',
                17,
                19,
                21
            ]
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
        ]
    } )
    .then( ... )
    .catch( ... );

9px

11px

13px

Normal

17px

19px

21px

# Accepting all font sizes

By default, all font-size values that are not specified in the config.fontSize.options are stripped. You can enable support for all font sizes by using the config.fontSize.supportAllValues option.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontSize: {
            options: [
                // Numerical values.
            ],
            supportAllValues: true
        },
        // ...
    } )
    .then( ... )
    .catch( ... );

This option can be used only in combination with numerical values.

# Configuring the font color and font background color features

Both font color and font background color features are configurable and share the same configuration format.

Please note that font color and font background color are separate plugins. They must be enabled and configured individually.

Check out the WYSIWYG editor below with both features customized using the editor configuration:

Text in this sample has multiple font colors and font background colors.

Here are some examples of custom colors not defined in the configuration that might be recognized and used in the "document colors" section.

# Specifying available colors

It is possible to configure which colors are available in the color dropdown. Use the config.fontColor.colors and config.fontBackgroundColor.colors configuration options to do so.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontColor: {
            colors: [
                {
                    color: 'hsl(0, 0%, 0%)',
                    label: 'Black'
                },
                {
                    color: 'hsl(0, 0%, 30%)',
                    label: 'Dim grey'
                },
                {
                    color: 'hsl(0, 0%, 60%)',
                    label: 'Grey'
                },
                {
                    color: 'hsl(0, 0%, 90%)',
                    label: 'Light grey'
                },
                {
                    color: 'hsl(0, 0%, 100%)',
                    label: 'White',
                    hasBorder: true
                },

                // ...
            ]
        },
        fontBackgroundColor: {
            colors: [
                {
                    color: 'hsl(0, 75%, 60%)',
                    label: 'Red'
                },
                {
                    color: 'hsl(30, 75%, 60%)',
                    label: 'Orange'
                },
                {
                    color: 'hsl(60, 75%, 60%)',
                    label: 'Yellow'
                },
                {
                    color: 'hsl(90, 75%, 60%)',
                    label: 'Light green'
                },
                {
                    color: 'hsl(120, 75%, 60%)',
                    label: 'Green'
                },

                // ...
            ]
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
        ]
    } )
    .then( ... )
    .catch( ... );

# Changing the geometry of the color grid

You can configure the number of columns in the color dropdown by setting the config.fontColor.columns and config.fontBackgroundColor.columns configuration options.

Usually, you will want to use this option when changing the number of available colors.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontColor: {
            colors: [
                // 9 colors defined here...
            ]

            columns: 3, // so, you can display them in 3 columns.

            // ...
        },
        fontBackgroundColor: {
            columns: 6,

            // ...
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
        ]
    } )
    .then( ... )
    .catch( ... );

# Documents colors

The font and font background color dropdowns contain the “Document colors” section. It lists the colors already used in the document for the users to be able to easily reuse them (for consistency purposes).

By default, the number of displayed document colors is limited to one row, but you can adjust it (or remove the whole section) by using the config.fontColor.documentColors or config.fontBackgroundColor.documentColors options.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontColor: {
            // Display 6 columns in the color grid.
            columns: 6,

            // And 12 document colors (2 rows of them).
            documentColors: 12,

            // ...
        },
        fontBackgroundColor: {
            // Remove the "Document colors" section.
            documentColors: 0,

            // ...
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
        ]
    } )
    .then( ... )
    .catch( ... );

# Installation

To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-font package:

npm install --save @ckeditor/ckeditor5-font

Then add it to your plugin list and the toolbar configuration:

import Font from '@ckeditor/ckeditor5-font/src/font';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Font, ... ],
        toolbar: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', ... ]
    } )
    .then( ... )
    .catch( ... );

You can also add just one or a selected few of the font features 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 installing plugins.

# Common API

The FontFamily plugin registers the following components:

  • The 'fontFamily' dropdown.

  • The 'fontFamily' command.

    The number of options and their names correspond to the config.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 must correspond 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 values:

    • 'Arial'
    • 'Courier New'
    • 'Georgia'
    • 'Lucida Sans Unicode'
    • 'Tahoma'
    • 'Times New Roman'
    • 'Trebuchet MS'
    • 'Verdana'

    Note that passing an empty value will remove the fontFamily attribute from the selection (default):

    editor.execute( 'fontFamily' );

The FontSize plugin registers the following components:

  • The 'fontSize' dropdown.

  • The 'fontSize' command.

    The number of options and their names correspond to the config.fontSize.options configuration option.

    You can change the font size of the current selection by executing the command with a desired value:

    // For numerical values:
editor.execute( 'fontSize', { value: 10 } );

// For named presets:
editor.execute( 'fontSize', { value: 'small' } );

    Passing an empty value will remove any config.fontSize set:

    editor.execute( 'fontSize' );

The FontColor plugin registers the following components:

  • The 'fontColor' dropdown.

  • The 'fontColor' command.

    You can change the font color of the current selection by executing the command with a desired value:

    editor.execute( 'fontColor', { value: 'rgb(30, 188, 97)' } );

    Passing an empty value will remove the font color from the selection:

    editor.execute( 'fontColor' );

The FontBackgroundColor plugin registers the following components:

  • The 'fontBackgroundColor' dropdown.

  • The 'fontBackgroundColor' command.

    You can change the font background color of the current selection by executing the command with a desired value:

    editor.execute( 'fontBackgroundColor', { value: 'rgb(30, 188, 97)' } );

    Passing an empty value will remove the font background color from the selection:

    editor.execute( 'fontBackgroundColor' );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Content compatibility

The Font plugin provides basic support for the deprecated <font> tag.

While <font color> is always supported, to use <font face> and <font size> you need to enable the config.fontFamily.supportAllValues and config.fontSize.supportAllValues options respectively.

Text formatted with <font> is accepted by the plugin, but the editor always returns the markup in a modern format, so the transformation is one way only.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-font.