Add Fonts in Quill Editor - Angular

I am having difficulty adding fonts to my quill editor in my angular application. It appears that I need to import the formats/font and whitelist the fonts that I want to use in my editor, but nothing I do is adding the fonts currently. Please see the code below and let me know if you have any questions. Thank you.

HTML

<div class="text-area">
<quill-editor
[styles]="quill_styles"
[modules]="modules"
[(ngModel)]="htmlContent"
placeholder="Hello World"
></quill-editor>
</div>


Typescript

import Quill from 'quill';
import BlotFormatter from 'quill-blot-formatter';
import { EditorChangeContent, EditorChangeSelection } from 'ngx-quill'

// const Font = Quill.import('formats/font') // Thought this would work
// Font.whitelist = ['sofia'] // Thought this would work
Quill.register('modules/blotFormatter', BlotFormatter);
// Quill.register(Font,true) // Thought this would work

export class MyComponent implements OnInit{
constructor( //Irrelevant ) {}

toolbarOptions = [
'bold','italic', 'underline', 'strike',
{'font': ['sofia']},
{ 'size': [] },
{ 'color': [] },
{ 'background': [] },
'link','image', 'video', 'formula',
{ 'script': 'super' }, { 'script': 'sub' },
'clean'
]

modules = {
toolbar: [this.toolbarOptions],
blotFormatter: {},
}

quill_styles = {
'height':'50vh'
}
}

Continue reading...