javascript - What is the best way to load only needed Google Web Fonts? -

i've got set simple news-blog-style frontpage website. content being edited ckeditor.

according question i've managed possible select several google web fonts in editor.

the problem is, have load these fonts frontpage. don't know fonts used anyway. loading of them seems bit exaggurated, if e.g. 3 of fonts being used anyway. content changes can't sure fonts.

is there way know fonts needed , import these frontpage?

and if not possible...

what best way load of these fonts front page?

first, solution assumes you're using google web font plugin ckeditor: http://ckeditor.com/addon/ckeditor-gwf-plugin

you can subscribe ckeditor changes , parse resulting html google font families. here's example using base example plugin page:

var editor = ckeditor.replace( 'editor1',{     toolbar: [         ['font', 'fontsize']     ],             startupfocus: true,             fillemptyblocks: false,             autoparagraph: false,             resize_enabled: false });  editor.on('change', function(event){     console.log(event.editor.getdata()); }); 

for sample input selected 2 web fonts different pieces of text outputs following html string:

<span style="font-family:actor;">hello world</span> <span style="font-family:allerta stencil;">it&#39;s nice meet you.&nbsp;</span> <link href="https://fonts.googleapis.com/css?family=actor" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=allerta stencil" rel="stylesheet" type="text/css" /> 

it's worth noting appears data includes requisite links in use font families however, html string parsed get, ['actor', 'allerta stencil'], persist , load dynamically on frontpage load web font loader. here's fiddle returns array of font-family names output string: https://jsfiddle.net/v4tnynu2/

check out web font loader google , typekit: https://developers.google.com/fonts/docs/webfont_loader

it allows dynamically load web fonts after page load:

webfont.load({     google: {          families: ['actor', 'allerta stencil']      }  });