Wednesday, 20 February 2019

How to add custom fonts to the QuillJS editor?

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



from How to add custom fonts to the QuillJS editor?

No comments:

Post a Comment