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!

i got a `Uncaught SyntaxError: Unexpected identifier` error in my console — Erico Chan, Mar 12 '13 at 23:20

score 1 · Answer 1 · answered Mar 12 '13 at 23:29

1

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

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

answered Mar 12 '13 at 23:29

kennebec

102,654
32
106
127

score 0 · Accepted Answer · answered Jun 25 '13 at 20:25

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!

score 0 · Answer 3 · answered Jan 22 '20 at 08:50

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;
}

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

3 Answers3