I want to be able to add custom font families to my Quill JS editor using the toolbar options via JavaScript, rather than defining them through HTML.

The code I have is below, which is the same code taken from the documentation:

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      
  [{ 'indent': '-1'}, { 'indent': '+1' }],          
  [{ 'direction': 'rtl' }],                       

  [{ 'size': ['small', false, 'large', 'huge'] }],  
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'color': [] }, { 'background': [] }],

  [{ 'font': [] }],       // Here, how do I specify custom font families??

  [{ 'align': [] }],


];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

Code running here:

Is there any way to do this? Also, I assume I need to include a link to Google fonts for each font I want to use, right?

Thanks

I want to be able to add custom font families to my Quill JS editor using the toolbar options via JavaScript, rather than defining them through HTML.

The code I have is below, which is the same code taken from the documentation:

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      
  [{ 'indent': '-1'}, { 'indent': '+1' }],          
  [{ 'direction': 'rtl' }],                       

  [{ 'size': ['small', false, 'large', 'huge'] }],  
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'color': [] }, { 'background': [] }],

  [{ 'font': [] }],       // Here, how do I specify custom font families??

  [{ 'align': [] }],


];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

Code running here: https://codepen.io/anon/pen/VgVZMg

Is there any way to do this? Also, I assume I need to include a link to Google fonts for each font I want to use, right?

Thanks

• javascript
• fonts
• font-family
• quill

Share Improve this question Follow asked Feb 16, 2019 at 11:14 alexconsalexcons 53144 gold badges88 silver badges1818 bronze badges 1

• 4 It is answered here: stackoverflow./questions/43728080/… – Dipen Shah Commented Feb 20, 2019 at 4:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4 +50

you can find your answer in this lisnk:

How to add font types on Quill js with toolbar options?

The process is like this you need 4 ponents:

A select tag with a ql-font class. This will contain the new font options. Add the new fonts to the whitelist. This has to be defined before you call the the Quill constructor in Javascript. Define the font-family for each label in the dropdown. Example: font-family: "Inconsolata" Define the content font-families that will be used in the text area. Following the example in the 3rd ponent: .ql-font-inconsolata { font-family: "Inconsolata";}

for more information visit link please.