How to add Fonts to Quill Editor using Angular

I have an Angular 18 Application and using Quill Richtext Editor. How to add a font, let say 'Roboto' ?

export const quillConfiguration = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons

[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'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': []}],
[{'align': []}],

['clean'], // remove formatting button
]
}



And my html component.

<quill-editor
(onContentChanged)="onContentChanged($event)"
[(ngModel)]="moEditorDocument.content"
[modules]="quillConfiguration"
[placeholder]="'Placeholder...'"
class="rich-text-editor"
id="rich-text-editor"
>
</quill-editor>

Continue reading...