Fonts with spaces in their name aren't properly applied in CKEditor

Question

Thanks to this post How can I add(programatically) google fonts to ckeditor I am able to add Google Fonts to my ckeditor. However I want to add the font "Goudy Bookletter 1911" and this font is not showing properly.
I inspected the element and its style is font-family: goudy bookletter 1911 when I change it to font-family: 'goudy bookletter 1911' it works.
Any one know how I can edit ckeditor so it has the quotes when the font style is applied? Thanks!

Answer 1

Since I can't figure how to add quotes to the config.font_names list without causing js error and I only have issue with the font Goudy Bookletter 1911, I fixed this by adding the camelCased name in the list so it looks something like this:

config.font_names = "Arial/Arial, Helvetica, sans-serif;Glass Antiqua;Goudy Bookletter 1911/GoudyBookletter1911;"

I can't change every Google font with spaces into camelCase since Google append some font names with something like "-Regular" but this fixes my issue for now. If you have a better idea, please tell me!

Answer 2

http://ckeditor.com/forums/CKEditor-3.x/Ckeditor-external-fonts-problem

This post on the ckeditor site may solve your problem...

Answer 3

For CkEditor 5: The normalizeFontNameForCSS in fontFamily/utils add the extra quotes. You can change that by creating a custom build but it's time consuming if it's just for that purpose

function normalizeFontNameForCSS( fontName ) {
    fontName = fontName.trim();

    // Compound font names should be quoted.
    if ( fontName.indexOf( ' ' ) > 0 ) {
        fontName = `'${ fontName }'`; // ==> fontName = `${ fontName }`
    }

    return fontName;
}