Customise Font Family in the Quill Editor Toolbar

This article covers how to put your own list of fonts in the Quill editor’s toolbar.

The short answer: import the font attributor with Quill.import('attributors/style/font'), assign an array of font names to its whitelist, and register it back. You also need a line of CSS so the names appear as labels.

Out of the box, Quill offers three fonts: Sans Serif, Serif and Monospace. Anything beyond those requires the steps below.

Verified on Quill 2.0.3. The Quill.import() and Quill.register() pattern is unchanged from 1.x.

The JavaScript

Build an array of font names, assign it to Font.whitelist, register with Quill.register(Font, true), and pass the same array to the toolbar.

The core is four lines:

const fontFamilyArr = ['system-ui', 'sans-serif', 'arial', 'serif', 'monospace'];
const Font = Quill.import('attributors/style/font');
Font.whitelist = fontFamilyArr;
Quill.register(Font, true);

The true in Quill.register() means “replace the existing registration”. Omit it and you keep the original three fonts.

Note the difference between attributors/style/font and attributors/class/font. This article uses the style variant.

▼style versus class

If you are saving the content to a database and rendering it on another page, choose the style variant. With the class variant you would also have to ship Quill’s stylesheet, or write rules for every ql-font-* class, wherever the content appears.

The full editor function:

/**
 * Creates a Quill editor.
 * @param make_id the id of the element to turn into an editor
 * @returns the Quill instance
 */
function quillEditor(make_id) {

    const themes = set_themes();

    // font-family
    const fontFamilyArr =
    ['system-ui', 'sans-serif', 'arial', 'serif', 'monospace', 'Courier', 'cursive', 'Comic Sans MS', 'fantasy'];
    const Font = Quill.import('attributors/style/font');
    Font.whitelist = fontFamilyArr;
    Quill.register(Font, true);

    const toolbarOptions = [
        [{ 'header': [1, 2, 3, 4, false] }],
        // the font picker
        [{ 'font': fontFamilyArr }],
        [{ 'align': [] }],
        ['bold', 'italic', 'underline'],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        ['image'],
        ['video'],
        ['formula'],
        ['link']
    ];

    make_id = '#' + make_id;

    const quill = new Quill(make_id, {
        modules: {
            toolbar: toolbarOptions
        },
        placeholder: 'Write your content here',
        theme: themes
    });

    return quill;
}

// pick a theme based on screen width
function set_themes() {
    return window.matchMedia('(min-width: 751px)').matches ? 'snow' : 'bubble';
}

The CSS

Without CSS, your added fonts show up in the toolbar under the default labels. content: attr(data-value) makes each option display its own font name.

Quill only carries display labels for its three built-in fonts. Entries added to the whitelist have no label, so the options are indistinguishable.

In SCSS:

.ql-snow,
.ql-bubble {
    .ql-picker {
        &.ql-font {
            .ql-picker-label,
            .ql-picker-item {
                &::before {
                    content: attr(data-value) !important;
                }
            }
        }
    }
}

If you switch themes, target .ql-bubble as well as .ql-snow. The JavaScript above picks the theme by screen width, so a phone gets .ql-bubble — and with only the snow rule written, font names would not appear there.

To render each option in its own font:

.ql-picker.ql-font .ql-picker-item[data-value="arial"]::before {
    font-family: arial;
}

Before running this code

This assumes Quill is already working. If it is not installed yet, start there.

Adding the Quill rich text editor to Laravel covers the CDN setup through to new Quill(). Quill 2.0 changed the CDN host, so snippets copied from older articles will not load.

The same pattern adds font sizes to the toolbar — see customising font-size in Quill. It is the same code with font swapped for size, so configuring both together is the least effort.