Hello!
I want to load a lot of external fonts from the Google Font Api. To increase performance, I want to load them "on the fly", when a specific font is selected from the dropdown menu. When the ckeditor loads the 1st time, I want to parse the content from the body and look for all used unknown font-family - put it in an array and load the fonts form the google api.
Can you please tell me, at which point do I have to launch the function, when the ckeditor loads the 1.st time and which point, when the user selected a new font from the drop-down menu?
I use the compressed ckeditor.js because I get an error, that the variable plugins is null when I use the ckeditor_source.js.
if someone needs the parser ... I'am not a js pro but it's a start
var used_fonts = [];
var font_pool = ['Fontdiner+Swanky','Cherry+Cream+Soda','Slackey','Sunshiney','Luckiest','Walter+Turncoat','Calligraffitti','Schoolbell','Coming+Soon','Permanent+Marker','Crushed','Homemade+Apple','Rock+Salt','Syncopate','Crafty+Girls','Chewy','Irish+Growler','Bentham','Merriweather','Kranky','UnifrakturMaguntia','Orbitron','Lekton','Corben','Unkempt','Buda','Cabin','Gruppo','Tinos','Lato','Allerta+Stencil','Cousine','Coda','Arimo','Just+Another+Hand','Kenia','Allerta','PT+Sans','UnifrakturCook','Raleway','Arvo','Vibur','Anonymous+Pro','Puritan','Josefin+Sans','Lobster','Covered+By+Your+Grace','Neuton','Cuprum','Philosopher','Copse','Crimson+Text','Molengo','Old+Standard+TT','Nobile','Reenie+Beanie','Cantarell','Droid+Sans+Mono','Droid+Sans','Vollkorn','Cardo','IM+Fell','Inconsolata','Ubuntu','Yanone+Kaffeesatz','Droid+Serif','Mountains+of+Christmas','Tangerine','Just+Me+Again+Down+Here','Josefin+Slab','OFL+Sorts+Mill+Goudy+TT','Geo','Sniglet','Neucha','Kristi'];
$("*").each(function(){
var string = $(this).css("font-family").replace(/'/g,"");
string = string.replace(/sans/,"");
string = string.replace(/serif/,"");
string = string.replace(/,/g,"");
string = string.replace(/"/g,"");
string = string.replace(/ /g,"+");
if($.inArray(string,font_pool) != "-1" && $.inArray(string,used_fonts) == "-1"){
used_fonts.push(string);
//alert(string);
}
});
WebFontConfig = {
google: { families: used_fonts }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
Re: CKE and Google Fonts Api
you need to add :
- the google font name to 'font_names' config var
the google css to 'contentCss' config var
Sample ? To add the google webfont "Lobster", call ckeditor with something like :
CKEDITOR.replace("youreditor", { 'font_names':'serif;sans serif;monospace;cursive;fantasy;Lobster', 'contentsCss':[ 'http://fonts.googleapis.com/css?family=Lobster' ] } ) ;Re: CKE and Google Fonts Api
Hello,
I did this part of script to use all google webfonts (I got the list in the Font previewer tool, in the select input).
Just enter the fonts you want in the array myFonts and it will be automatically loaded. Many font will make the ckeditor font selector menu heavy to load.
Here's the js :
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', '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 = ['/js/ckeditor/contents.css'].concat(myFonts);Re: CKE and Google Fonts Api
Ze Big Duck
You can do what you are doing there programmatically, without having to create a great big array. And at the same time pick up on the latest set of Google webfonts. First you need to get a webfonts key from Google, then simply this:
include_a_js_file('https://www.googleapis.com/webfonts/v1/webfonts?sort=alpha&key='+MYFEBFONTSKEYWOTIGOTFROMGOOGLE+'&callback=setCKGwebfonts'); /* *********** setGwebfonts **************** */ function setCKGwebfonts(jsonData){ try { CKGoogle_webfonts_entries(jsonData.items); } catch(e){ // alert(e); // can't do Google webfonts } } /* ************* Google_webfonts_entries **************** */ function CKGoogle_webfonts_entries(json_items){ var gFonts=new Array(); for (j=0; j<json_items.length; j++) { CKEDITOR.config.font_names=CKEDITOR.config.font_names+';'+json_items[j].family; gFonts[j] = 'http://fonts.googleapis.com/css?family='+json_items[j].family.replace(' ','+'); } CKEDITOR.config.contentsCss = ['../includes/ckeditor/contents.css'].concat(gFonts); }Re: Re: CKE and Google Fonts Api
Thanks for the code, much appreciate it. Can you please explain which code goes where in what file. This would greatly help starters/non-programmer.
Regards,
Praney
Can we improve the
Can we improve the performance here. i have around 400 web fonts and concat all the css into contents.css take a bit long. how i can improve it?
can i add based on what font user select and dynamically i will add the css into the head ?
Hello, i do the following:
Hello, i do the following:
myFonts = ['Aclonica', 'Allan', 'Allerta', 'Allerta Stencil', 'Amaranth', 'Angkor', 'Annie Use Your Telescope']; 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 = ['/js/ckeditor/contents.css'].concat(myFonts); And it's work perfect in CKEditor. But don't work in CKEditor INLINE, the new fonts appears in the combobox but when you selected someone don't change the format of the text. How do you work in CKEditor INLINE? Thanks.CKEditor INLINE fix
Hi,
add the google fonts stylesheet to your document header.
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(' ','+'); //assuming you use jquery $("head").append("<link rel='stylesheet' href='"+ myFonts[i] +"'>"); }Performance Issue when user a lot of fonts
Hi,
I use this code and its work percectly but I have a problem with the performance.
I already change the code to make only one request to google for getting the CSS but when I click on the Font Select Box
to open the font list the browser is making a lot of request to google for getting the fonts that need to be display and this is
taking a lot of time (its downloading 6.2MB because I am using around 60 font).
I googling and find the next plugin for Bootstrap and as you can see they do it using a background image with all the fonts.
http://bootstrapformhelpers.com/googlefont/#.Um_TCXAwojY
I like to do the same for the CKEditor but I do not know how to edit and change the font combobox to work like this.
Can anyone have a solution to my case?
Keep it simple
Simply add this at the top of the ckeditor stylesheet, contents.css that is.
@import url("http://fonts.googleapis.com/css?family=Josefin+Sans|Alegreya");