Search code examples
javascriptcssckeditorgoogle-webfonts

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


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!


Solution

  • 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!