How to add custom fonts to the quill.js editor?
How to add custom fonts to the quill.js editor?
1 answer
by
darion ,
2 months ago
@brandy
To add custom fonts to the Quill.js editor, you can follow these steps:
- 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.
- Upload the font file(s) to your server or a cloud storage service where they can be accessed via a URL.
- 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>
|
- 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.
- 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.