How to add custom fonts to the quill.js editor?

Member

by brandy , in category: Javascript , a month ago

How to add custom fonts to the quill.js editor?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by darion , a month ago

@brandy 

To add custom fonts to the Quill.js editor, you can follow these steps:

  1. Download the custom font file(s) that you want to add to the editor. Make sure to download the font file in different formats like .ttf, .woff, .woff2, etc.
  2. Upload the font file(s) to your server or a cloud storage service where they can be accessed via a URL.
  3. In the HTML file where you initialize the Quill editor, you can specify the custom font by adding a CSS rule to the editor's stylesheet.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var quill = new Quill('#editor', {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],
      [{ '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

      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
      [{ 'font': ['Cantarell']}],
      [{ 'align': [] }],
    ]
  },
  theme: 'snow'
});

<!-- Add custom font to Quill -->
<style>
@font-face {
    font-family: 'Cantarell';
    src: url('/path/to/custom-font.woff2') format('woff2'),
         url('/path/to/custom-font.woff') format('woff');
}
</style>


  1. Make sure to specify the correct font-family in the @font-face rule. This should match the font-family name specified in the custom CSS rule for the editor.
  2. Now, your custom font should be available in the font dropdown menu of the Quill editor for users to select and use in their text.