Quill: Fonts with spaces in the name don't work properly

[jcludwig]

The font selector in the toolbar does not update properly when using fonts with spaces in their name.

1) Fiddle here: https://jsfiddle.net/zq03kqL1/
2) Create a line of text with "Wingdings 2" set as the font.
3) Put a line break in the line so the text spans 2 lines.
4) Select the text across the 2 lines.

Expected behavior: Font in the toolbar should be "Wingdings 2"

Actual behavior: Font in the toolbar is empty

Platforms: Chrome 48 on Windows 10, IE11, Edge

Version: v0.19.12

[jhchen]

What's going on here is the label is blank whenever there's more than one font being selected (Word, GDocs does this). But Quill does not let you set a font for the newline character so when you select across lines, there will be more than one font being returned so the label becomes blank.

[jcludwig]

What I noticed is that for one of the lines the internal format seemed to be 'Wingdings 2' and for another line it was Wingdings 2. I thought this might have something to do with having to use quotes around the font name.

[jhchen]

Both lines appear to be 'Windings 2' for me although there are a few ways step two can be followed.

[jhchen]

This has been fixed in the beta release

[tomcon]

EDIT: figured it out by this example:
https://github.com/quilljs/quill/blob/7a9d86a149f5aa39cc05c819f87c8ea2f2412735/docs/assets/css/styles.css#L886

Great work btw!

I'm having the same problem - but with using the cfg object rather than the answer.
Single font names are working fine but what is the css syntax for fonts with spaces (tried using a dash but no luck): .ql-font-open-sans { font-family: 'Open Sans' , sans-serif;}

 quillFonts  = ['arial',  'calibri',  'courier new', 'georgia', 'lucida sans unicode', 
                     'open sans', 'roboto', ...     ];
var fonts = Quill.import('formats/font');
fonts.whitelist = quillFonts;

 this._quill = new Quill(editor, {
         modules: {
            toolbar: [
               [{ 'font': fonts.whitelist }],
````

.ql-font-arial { font-family: 'Arial' , sans-serif;}
.ql-font-open-sans { font-family: 'Open Sans' , sans-serif;} DOESN'T WORK

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=arial]::before {
content: 'Arial/Helvetica'; font-family: 'Arial', 'Helvetica';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="open sans"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="open sans"]::before {
content: 'Open Sans'; font-family: 'Open Sans', sans-serif;
} DOESN'T WORK
```

[jhchen]

There's now an example of this specifically https://quilljs.com/playground/#custom-fonts

[tomcon]

@jhchen it's not that useful to be honest as in the example, the only font with spaces is set as default for the container in the css. So imo there is no example of implementing something fairly common, custom fonts with spaces in the names. The solution was:

      quillFonts  = ['arial',  'calibri',  'courier', 'georgia', 'lucida', 
                     'open', 'roboto',  'tahoma',  'times',  'trebuchet',  'verdana'     ];

      var fonts = Quill.import('formats/font');
      fonts.whitelist = quillFonts;

      this._quill = new Quill(editor, {
         modules: {
            toolbar: [
               [{ 'font': fonts.whitelist }],
               ....

and the css:

.ql-font-arial                {  font-family: 'Arial'             , sans-serif;}
.ql-font-roboto               {  font-family: 'Roboto'            , sans-serif;}
.ql-font-calibri              {  font-family: 'Calibri'           , sans-serif;}
.ql-font-courier              {  font-family: 'Courier New'       , serif;    }
.ql-font-georgia              {  font-family: 'Georgia'           , sans-serif;}
.ql-font-lucida               {  font-family: 'Lucida Sans Unicode', sans-serif;}
.ql-font-open                 {  font-family: 'Open Sans'         , sans-serif;}
.ql-font-tahoma               {  font-family: 'Tahoma'            , sans-serif;}
.ql-font-times                {  font-family: 'Times New Roman'   , sans-serif;}
.ql-font-trebuchet            {  font-family: 'Trebuchet Ms'      , sans-serif;}
.ql-font-verdana              {  font-family: 'Verdana'           , sans-serif;}

(probably don't need the double quotes below)
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=arial]::before {
    content: 'Arial';  font-family: 'Arial', 'Helvetica';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=calibri]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=calibri]::before {
    content: 'Calibri'; font-family: 'Calibri', sans-serif;
}

.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: 'Roboto'; font-family: 'Roboto', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before {
    content: 'Courier New';  font-family: 'Courier New';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=georgia]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=georgia]::before {
    content: 'Georgia';  font-family: 'Georgia', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lucida"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lucida"]::before {
    content: 'Lucida Sans';  font-family: 'Lucida Sans Unicode', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="open"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="open"]::before {
    content: 'Open Sans';  font-family: 'Open Sans', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=tahoma]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=tahoma]::before {
    content: 'Tahoma';  font-family: 'Tahoma';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before {
    content: 'Times New Roman';  font-family: 'Times New Roman';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet"]::before {
    content: 'Trebuchet MS';  font-family: 'Trebuchet MS';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=verdana]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=verdana]::before {
    content: 'Verdana';  font-family: 'Verdana', sans-serif;