Customise Font Size in the Quill Editor Toolbar

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

The short answer: import the size attributor with Quill.import('attributors/style/size'), assign an array of sizes to its whitelist, and register it back. A line of CSS then makes the values appear as labels.

Out of the box, Quill offers four steps: Small, Normal, Large and Huge. If you want writers choosing specific values such as 14px or 16px, the steps below are what you need.

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

The JavaScript

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

The core is four lines:

const fontSizeArr = ['12px', '14px', '16px', '20px', '24px', '32px'];
const Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);

Whatever string you put in the whitelist is written out verbatim as style="font-size: 14px;". Include the unit — a bare '14' produces an invalid CSS value and nothing happens.

Relative units work too, which is often the better choice if the display side scales its typography:

const fontSizeArr = ['0.75rem', '1rem', '1.25rem', '1.5rem', '2rem'];

Resist the urge to offer too many steps. The full source below lists fourteen, but real content rarely uses more than four or five. A long dropdown slows the writer down and produces inconsistent documents.

Note that attributors/style/size writes a style attribute, so stored HTML renders correctly anywhere. attributors/class/size would emit classes such as ql-size-14px and require matching CSS wherever the content is displayed. For content saved to a database and rendered on another page, use the style variant.

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-size
    const fontSizeArr = ['8px','9px','10px','12px','14px','16px','20px','24px','32px','42px','54px','68px','84px','98px'];
    const Size = Quill.import('attributors/style/size');
    Size.whitelist = fontSizeArr;
    Quill.register(Size, true);

    const toolbarOptions = [
        [{ 'header': [1, 2, 3, 4, false] }],
        [{ 'font': [] }],
        // the size picker
        [{ 'size': fontSizeArr }],
        [{ '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, the sizes you add appear as blank entries in the toolbar. content: attr(data-value) makes each option display its own value.

Quill carries labels only for its four built-in steps. Adding 14px to the whitelist gives you an option with no label at all.

In SCSS:

.ql-snow,
.ql-bubble {
    .ql-picker {
        &.ql-size {
            .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 chooses the theme by screen width, so on a phone the picker uses .ql-bubble — and with only the snow rule written, the sizes stay blank there.

To preview each option at its actual size:

.ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    font-size: 14px;
}

Cap this at a sensible value: applying it to the largest steps stretches the dropdown rows out of shape.

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 fonts to the toolbar — see customising font-family in Quill. It is the same code with size swapped for font, so configuring both together is the least effort.