Loading external fonts

[fstbraz]

Hello,

I'm having issues on loading external fonts. Html:

<quill-editor [(ngModel)]="HTML_DATA" [style]="{'height' : '100%'}" [modules]="configEditor">

On my config object I've add:

configEditor: {} = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],       
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],         
      [{ 'font': [ 'Aref Ruqaa', 'Mirza', 'Roboto'] }],
      [{ 'align': [] }],
      ['clean'],                   
    ]
  };

loaded the google font on index.html <link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa|Mirza|Roboto" rel="stylesheet">

and added some css on the component:

#editor-container {
    font-family: "Aref Ruqaa";
    font-size: 18px;
    height: 375px;
  }

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

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

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

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

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

I'm doing anything wrong? It's possible to load fonts with this directive? The documentation is a little bit confusing. The only working example that I can see is in regular js.

https://codepen.io/quill/pen/gLBYam

Thanks.

[KillerCodeMonkey]

yeah but i think you have to build your own toolbar like in the example instead of passing only the config.

see the last code-block in the config section: https://github.com/KillerCodeMonkey/ngx-quill#config

[fstbraz]

Not working either when:

<quill-editor [(ngModel)]="HTML_DATA" [style]="{'height' : '100%'}" >
    <div quill-editor-toolbar>
        <span class="ql-formats">
            <select class="ql-font">
                <option selected>Aref Ruqaa</option>
                <option value="mirza">Mirza</option>
                <option value="roboto">Roboto</option>
            </select>
        </span>
    </div>
</quill-editor>

Component:

 ngOnInit() {

    let Font = Quill.import('formats/font');

    Font.whitelist = ['mirza', 'roboto'];
    Quill.register(Font, true);

    let quill = new Quill('#editor-container', {
      modules: {
        toolbar: '#toolbar-container'
      },
      theme: 'snow'
    });
}

:(

[KillerCodeMonkey]

and your css for the font families are correct? the css selectors are working?

[fstbraz]

The css has the id selector, I get this error on the console:

quill Invalid Quill container #editor-container

and after adding the if in the html like:

<quill-editor id="editor-container" [(ngModel)]="HTML_DATA" [style]="{'height' : '100%'}" >
    <div quill-editor-toolbar>
        <span class="ql-formats">
            <select class="ql-font">
                <option selected>Aref Ruqaa</option>
                <option value="mirza">Mirza</option>
                <option value="roboto">Roboto</option>
            </select>
        </span>
    </div>
</quill-editor>

I get:

quill:toolbar Container required for toolbar

[KillerCodeMonkey]

stranges works perfectly for me. i added the example of quilljs to the ngx-quill-example repo.

check out the last editor at the bottom of the page: https://killercodemonkey.github.io/ngx-quill-example/

1. make sure the fonts you want to add are available on your system (if not you load them via google webfonts and added the font families to your app)

2. import quill fonts and whitelist your custom fonts

3. add them to your custom toolbar and add the styling like in the quilljs example.

[fstbraz]

My problem was with the webpack loading order, solved and working perfectly. Tks. Keep up the good work.