How to add custom fonts to the QuillJS editor?

Question

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

Answer 1

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 components:

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 component: .ql-font-inconsolata { font-family: "Inconsolata";}

for more information visit link please.