How can I add(programatically) google fonts to ckeditor

Question

I have just download CKEditor and its great. Although I have noticed that it slacks fonts. So I thought it would be a good idea to be able to add Google Web Fonts to CKEditor to add to its functionality.

I have searched online but I could only find how to manually go in and add each font in config.js file.

Can someone please help me add all Google Web Fonts to CKEditor programatically and show how.

Cooksey

Answer 1

Ok I found the answer. I am posting it here so it could be helpful for anyone else who's looking for the same. So here it is:

myFonts = ['Aclonica', 'Allan', 'Allerta', 'Allerta Stencil', 'Amaranth', 'Angkor', 'Annie Use Your Telescope', 'Anonymous Pro', 'Anton', 'Architects Daughter', 'Arimo', 'Artifika', 'Arvo', 'Astloch', 'Bangers', 'Battambang', 'Bayon', 'Bentham', 'Bevan', 'Bigshot One', 'Bokor', 'Brawler', 'Buda', 'Cabin', 'Cabin Sketch', 'Calligraffitti', 'Candal', 'Cantarell', 'Cardo', 'Carter One', 'Caudex', 'Chenla', 'Cherry Cream Soda', 'Chewy', 'Coda', 'Coda Caption', 'Coming Soon', 'Content', 'Copse', 'Corben', 'Cousine', 'Covered By Your Grace', 'Crafty Girls', 'Crimson Text', 'Crushed', 'Cuprum', 'Damion', 'Dancing Script', 'Dangrek', 'Dawning of a New Day', 'Didact Gothic', 'Droid Sans', 'Droid Sans Mono', 'Droid Serif', 'EB Garamond', 'Expletus Sans', 'Fontdiner Swanky', 'Francois One', 'Freehand', 'GFS Didot', 'GFS Neohellenic', 'Geo', 'Goudy Bookletter 1911', 'Gruppo', 'Handlee', 'Hanuman', 'Holtwood One SC', 'Homemade Apple', 'IM Fell DW Pica', 'IM Fell DW Pica SC', 'IM Fell Double Pica', 'IM Fell Double Pica SC', 'IM Fell English', 'IM Fell English SC', 'IM Fell French Canon', 'IM Fell French Canon SC', 'IM Fell Great Primer', 'IM Fell Great Primer SC', 'Inconsolata', 'Indie Flower', 'Irish Grover', 'Josefin Sans', 'Josefin Slab', 'Judson', 'Jura', 'Just Another Hand', 'Just Me Again Down Here', 'Kenia', 'Khmer', 'Koulen', 'Kranky', 'Kreon', 'Kristi', 'Lato', 'League Script', 'Lekton', 'Limelight', 'Lobster', 'Lora', 'Luckiest Guy', 'Maiden Orange', 'Mako', 'Maven Pro', 'Meddon', 'MedievalSharp', 'Megrim', 'Merriweather', 'Metal', 'Metrophobic', 'Michroma', 'Miltonian', 'Miltonian Tattoo', 'Molengo', 'Monofett', 'Moul', 'Moulpali', 'Mountains of Christmas', 'Muli', 'Neucha', 'Neuton', 'News Cycle', 'Nobile', 'Nova Cut', 'Nova Flat', 'Nova Mono', 'Nova Oval', 'Nova Round', 'Nova Script', 'Nova Slim', 'Nova Square', 'Nunito', 'OFL Sorts Mill Goudy TT', 'Odor Mean Chey', 'Old Standard TT', 'Open Sans', 'Open Sans Condensed', 'Orbitron', 'Oswald', 'Over the Rainbow', 'PT Sans', 'PT Sans Caption', 'PT Sans Narrow', 'PT Serif', 'PT Serif Caption', 'Pacifico', 'Paytone One', 'Permanent Marker', 'Philosopher', 'Play', 'Playfair Display', 'Podkova', 'Preahvihear', 'Puritan', 'Quattrocento', 'Quattrocento Sans', 'Radley', 'Raleway', 'Reenie Beanie', 'Rock Salt', 'Rokkitt', 'Ruslan Display', 'Schoolbell', 'Shanti', 'Siemreap', 'Sigmar One', 'Six Caps', 'Slackey', 'Smythe', 'Sniglet', 'Special Elite', 'Sue Ellen Francisco', 'Sunshiney', 'Suwannaphum', 'Swanky and Moo Moo', 'Syncopate', 'Tangerine', 'Taprom', 'Tenor Sans', 'Terminal Dosis Light', 'The Girl Next Door', 'Tinos', 'Ubuntu', 'Ultra', 'UnifrakturCook', 'UnifrakturMaguntia', 'Unkempt', 'VT323', 'Vibur', 'Vollkorn', 'Waiting for the Sunrise', 'Wallpoet', 'Walter Turncoat', 'Wire One', 'Yanone Kaffeesatz'];

config.font_names = 'serif;sans serif;monospace;cursive;fantasy';

for(var i = 0; i<myFonts.length; i++){
            config.font_names = config.font_names+';'+myFonts[i];
            myFonts[i] = 'http://fonts.googleapis.com/css?family='+myFonts[i].replace(' ','+');
}

config.contentsCss = ['/ckeditor/contents.css'].concat(myFonts);

Cheers,

Praney

Cooksey

It is working for me but I'm getting one error and other fonts missing from format dropdowlist "Refused to apply style from 'localhost:4200/ckeditor/contents.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled." – Constraint

Keep in mind you might want to avoid direct API calls to Google Fonts API because of their privacy-policy wicki.io/posts/2022-02-goodbye-google-fonts-data-privacy-gdpr Inform your client about it if they wish to use it, especially if you have users from Germany. – Gametangium

Answer 2

You could use a scripting language to pull in a list of all the Google WebFonts using the developer API, and automatically generating the CKEditor config lines.

To use the API you will need an API Key,

To acquire an API key, visit the APIs Console. In the Services pane, activate the Google Web Fonts Developer API; if the Terms of Service appear, read and accept them.

Next, go to the API Access pane. The API key is near the bottom of that pane, in the section titled "Simple API Access."

After you have an API key, your application can append the query parameter key=yourAPIKey to all request URLs.

The API key is safe for embedding in URLs; it doesn't need any encoding.

The endpoint for webfonts is https://www.googleapis.com/webfonts/v1/webfonts?key=YOURKEYHERE and it returns a JSON response, so for example, you could use jQuery for example to ajax in the request, and iterate through the objects, building the config lines then just copy and paste it in.

Destalinization

Thanks for your reply, but I have only started learning javascript. Is it possible to help me with the coding bit? – Cooksey

Hey, sure, I wrote the code for pulling it, drop me an email daniel [at] buildhq.co – Destalinization

Thanks mate, I just sent you an email. Will appreciate your help. Cheers! – Cooksey