Load Google web fonts script link asynchronously

Question

I'm trying to increase my website performance by doing some tweaks, and i have found the google web fonts scripts to load fonts asynchronously, the problem is that the fonts loads asynchronously but not the script src link so i just moved the problem with css to js.

My actual code is that:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
   WebFont.load({
      google: {
        families: ['Oswald:400,300', 'Material+Icons']]
      }
});

I've tried to use async and defer but on the script src but it didn't work (it eliminated the page block render but the fonts didn't loaded like the other scripts do with async).

So what's the best way to remove the script src link?

Answer 1

Try This.

<script>
   WebFontConfig = {
        google: { families: ['Oswald:400,300', 'Material+Icons'] }
   };

   (function(d) {
        var wf = d.createElement('script'), s = d.scripts[0];
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
        wf.async = true;
        s.parentNode.insertBefore(wf, s);
   })(document);
</script>