Names of the fonts not displayed

[Samyssmile]

My Config

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': ['aref', 'roboto', 'mirza', 'serif', 'monospace']}],
    [{'align': []}],

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

My HTML Tag

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

My CSS

[quill-editor-toolbar] .ql-font span[data-label="Aref Ruqaa"]::before {
  font-family: "Aref Ruqaa";
}

[quill-editor-toolbar] .ql-font span[data-label="Mirza"]::before {
  font-family: "Mirza";
}

[quill-editor-toolbar] .ql-font span[data-label="Roboto"]::before {
  font-family: "Roboto";
}

/* Set content font-families */

.ql-font-mirza {
  font-family: "Mirza";
}

.ql-font-aref {
  font-family: "Aref Ruqaa";
}

.ql-font-roboto {
  font-family: "Roboto";
}

And Config Provider

    provideQuillConfig({
      customOptions: [{
        import: 'formats/font',
        whitelist: ['mirza', 'roboto', 'aref', 'serif', 'monospace']
      }]
    })

As you can see I can pick fonts, and font is changed. But I cant see font names. Any ideas why?

[KillerCodeMonkey]

i guess you need to build up a custom toolbar like i did in my example: https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/app/components/custom-toolbar/custom-toolbar.component.html#L15

but maybe ask at the quilljs stackoverflow or repository if there is any "mapping" to achieve this without a custom toolbar

[Samyssmile]

I want to avoid to build custom toolbar.

Solved it with adding this to global style.scss of angular.

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=aref]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=aref]::before {
  content: 'Aref Ruqaa'
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=roboto]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=roboto]::before {
  content: 'Reoboto'
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=mirza]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=mirza]::before {
  content: 'Mirza'
}

[KillerCodeMonkey]

Thanks for sharing your solution :).

I thought that there may be a solution on quill side, but after checking the issues i just closed the browser tab... too many issues with fonts and font families + names. ^^

[KillerCodeMonkey]

@Samyssmile please stop spamming each issue regarding fonts with your repo-link...

the solution is already posted here