I can see the font-family differences within the editor (i.e., the customized fonts are applied properly), but I'm unable to display the list of font names on the Quill editor toolbar.
I used the Google font website to get the font resources properly. So, I used this code (from the embed code > web section):
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:opsz,wght@18..144,300..900&family=Montserrat:wght@100..900&family=Noto+Sans:wght@100..900&family=Open+Sans:wght@300..800&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:wght@100..900&family=Roboto+Mono:wght@100..700&family=Roboto:wght@100..900&family=Slabo+27px&display=swap" rel="stylesheet">Now in my Blazor web app project:
RazorPage.razor.css, simplified CSS style
.ql-font-roboto { font-family: 'Roboto', sans-serif;}.ql-font-open-sans { font-family: 'Open Sans', sans-serif;}.ql-font-lato { font-family: 'Lato', sans-serif;}.ql-font-montserrat { font-family: 'Montserrat', sans-serif;}.ql-font-roboto-condensed { font-family: 'Roboto Condensed', sans-serif;}.ql-font-oswald { font-family: 'Oswald', sans-serif;}.ql-font-poppins { font-family: 'Poppins', sans-serif;}.ql-font-slabo-27px { font-family: 'Slabo 27px', serif;}.ql-font-noto-sans { font-family: 'Noto Sans', sans-serif;}.ql-font-roboto-mono { font-family: 'Roboto Mono', monospace;}.ql-font-merriweather { font-family: 'Merriweather', serif;}In my Javascript file that I'm using for my RazorPage.razor:
const Font = Quill.import('attributors/style/font');Font.whitelist = ['roboto', 'open sans', 'lato', 'montserrat', 'roboto condensed','oswald', 'poppins', 'slabo 27px', 'noto sans', 'roboto mono', 'merriweather'];Quill.register(Font, true);setTimeout(function () { const quill = new Quill('#editor', { modules: { toolbar: [ // I have no idea how to specify this: #toolbar-container ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'code-block', 'link', 'image'], [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent [{ 'direction': 'rtl' }], // text direction [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme [{ 'font': Font.whitelist }], [{ 'align': [] }], ['clean'] ], }, placeholder: 'Compose a product description here...', theme: 'snow' }); window.quillEditor = quill; console.log("Quill initialized");}, 1000);Here's the Quill rich text editor code:
<div class="w-100"><div id="editor" class="w-100 rounded-bottom"></div></div>I can see that the font is successfully imported to the editor, but it doesn't reflect on the toolbar font selection:
I've alread followed the Quill official documentation, and this solution, which I'll provide below:
Still in RazorPage.razor.css
#toolbar-container .ql-font-roboto span[data-label="Roboto"]::before { font-family: "Roboto";}#toolbar-container .ql-font-open-sans span[data-label="Open Sans"]::before { font-family: "Open Sans";}#toolbar-container .ql-font-lato span[data-label="Lato"]::before { font-family: "Lato";}#toolbar-container .ql-font-montserrat span[data-label="Montserrat"]::before { font-family: "Montserrat";}#toolbar-container .ql-font-roboto-condensed span[data-label="Roboto Condensed"]::before { font-family: "Roboto Condensed";}#toolbar-container .ql-font-oswald span[data-label="Oswald"]::before { font-family: "Oswald";}#toolbar-container .ql-font-poppins span[data-label="Poppins"]::before { font-family: "Poppins";}#toolbar-container .ql-font-slabo-27px span[data-label="Slabo 27px"]::before { font-family: "Slabo 27px";}#toolbar-container .ql-font-noto-sans span[data-label="Noto Sans"]::before { font-family: "Noto Sans";}#toolbar-container .ql-font-roboto-mono span[data-label="Roboto Mono"]::before { font-family: "Roboto Mono";}#toolbar-container .ql-font-merriweather span[data-label="Merriweather"]::before { font-family: "Merriweather";}As you can see in the above CSS code snippet, I have already added some adjustments to the code to make it suited for my needs.
However, I cannot solve the issue of having duplicated Sans Serif font-family selections. Note that if I select a single font family selection that is ranked based on the order I've defined, the font-family is applied properly on the highlighted line of text.
Here's the beautified generated code (font-family selections) from the DevTools > Elements:
<span class="ql-formats"><span class="ql-font ql-picker ql-expanded"><span class="ql-picker-label" tabindex="0" role="button" aria-expanded="true" aria-controls="ql-picker-options-2" data-value="roboto"><svg viewBox="0 0 18 18"><polygon class="ql-stroke" points="7 11 9 13 11 11 7 11"></polygon><polygon class="ql-stroke" points="7 7 9 5 11 7 7 7"></polygon></svg></span><span class="ql-picker-options" aria-hidden="false" tabindex="-1" id="ql-picker-options-2"><span tabindex="0" role="button" class="ql-picker-item" data-value="roboto"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="open sans"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="lato"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="montserrat"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="roboto condensed"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="oswald"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="poppins"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="slabo 27px"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="noto sans"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="roboto mono"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="merriweather"></span></span></span><select class="ql-font" style="display: none;"><option value="roboto"></option><option value="open sans"></option><option value="lato"></option><option value="montserrat"></option><option value="roboto condensed"></option><option value="oswald"></option><option value="poppins"></option><option value="slabo 27px"></option><option value="noto sans"></option><option value="roboto mono"></option><option value="merriweather"></option></select></span>On the other hand, I already reviewed this question:
But in my case, I need to utilize the pre-made toolbar options and only modify the font-family selection on it.
So my question is, how can I solve this issue in the Quill rich text editor in a Blazor web application with .NET 9?