0

No matter how I tried to remove the default "Sans serif" font from the font selection in Quill js it kept appearing.

Even if I removed it from it kept appearing

enter image description here

As you can see in the picture the font is present even if not in the select which is something like:

     <select class="ql-font">
        <option selected>SourceSansPro</option>
        <option value="inconsolata">Inconsolata</option>
        <option value="roboto">Roboto</option>
        <option value="mirza">Mirza</option>
        <option value="arial">Arial</option>
      </select>

So how do I get rid of it?

Note: I used this question: How to add font types on Quill js with toolbar options? as guide.

Alex
  • 5,510
  • 8
  • 35
  • 54

2 Answers2

1

From the SO link you provided, I consolidated the answers to register the fonts dynamically and it can override the default font list completely.

You can try the code snippet below:

<!DOCTYPE html>

<html>

<head>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro%7CRoboto%7CInconsolata%7CMirza"
        rel="stylesheet">

    <style>
        #editor-container {
            width: 100%;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        /* to avoid overflow for long font name */
        .ql-formats:nth-child(1) {
            width: 130px;
        }

        /* expand to ql-format width */
        .ql-snow .ql-picker.ql-font {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="toolbar-container" class="ql-toolbar ql-snow">
        <span class="ql-formats">
            <select class="ql-font">
                <option value="source-sans-pro" selected></option>
                <option value="inconsolata"></option>
                <option value="roboto"></option>
                <option value="mirza"></option>
                <option value="arial"></option>
            </select>
        </span>
        <span class="ql-formats">
            <select class="ql-header">
                <option value="1"></option>
                <option value="2"></option>
                <option value="3"></option>
                <option selected="selected"></option>
            </select>
        </span>
        <span class="ql-formats">
            <button type="button" class="ql-bold"></button>
        </span>
        <span class="ql-formats">
            <button type="button" class="ql-list" value="ordered"></button>
            <button type="button" class="ql-list" value="bullet"></button>
        </span>
        <span class="ql-formats">
            <button type="button" class="ql-clean"></button>
        </span>
    </div>

    <div id="editor-container">
        <div id="editor">
            <p>
                He has since been seeking advice from specialists, including Serbian doctor Zdenko Milinkovic, who said
                Djokovic is suffering
                from a "bruised bone due to excessive playing".
            </p>
        </div>
    </div>

    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script>
        const getFontName = (font) => font.toLowerCase().replace(/\s/g, "-");
        const fontNameList = ['Source Sans Pro', 'Inconsolata', 'Roboto', 'Mirza', 'Arial'];
        const fontNameLowercaseList = fontNameList.map(font => getFontName(font));

        // register fonts in quill
        const fonts = Quill.import("formats/font");
        fonts.whitelist = fontNameLowercaseList
        Quill.register(fonts, true);

        const quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: {
                    container: '#toolbar-container'
                }
            }
        });

        // Add extra font CSS to the DOM dynamically
        const node = document.createElement('style');
        node.innerHTML = fontNameList.reduce((fontStyle, fontName) => {
            const fontNameLowercase = getFontName(fontName);
            fontStyle += `
                .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=${fontNameLowercase}]::before,
                .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=${fontNameLowercase}]::before {
                    content: '${fontName}';
                    font-family: '${fontName}';
                }

                .ql-font-${fontNameLowercase} {
                    font-family: '${fontName}';
                }
            `
            return fontStyle
        }, '')
        document.body.appendChild(node);
    </script>
</body>

</html>
Mic Fung
  • 5,404
  • 2
  • 7
  • 17
  • The problem with the snippet is that if you select a word and change it to Roboto and then select a different word (with font untouched so presumably Source Sans Pro) it does not change to that font (Source Sans Pro) but stay as Roboto. – Alex Jul 11 '21 at 12:35
  • ok. get your point. updated the snippet to construct the toolbar manually to have source-sans-pro be selected to be the default font so the changes of font will behave like quilljs example. – Mic Fung Jul 11 '21 at 13:40
0

Try overriding the ql-editor class in your CSS file:

.ql-editor {
  font-family: 'Source Sans Pro', sans-serif;
}

Source

Miguel Fernandes
  • 19
  • 1