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?

score 2 · Accepted Answer · answered Nov 10 '18 at 12:15

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>

score -2 · Answer 2 · answered Sep 26 '18 at 16:09

-2

Here ya go, include this in the body, right before </body> and not the head tag

<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>

This makes the font load after everything above it.

But instead of Noto Serif, use Oswald font in your case.

Answered originally by user "Paddy" here:

https://stackoverflow.com/a/40624546/6283055

answered Sep 26 '18 at 16:09

oatmealNUGGY

775
1
6
22

2

As @soren121 mentioned in the comment of the same answer https://stackoverflow.com/a/40624546/6283055 lazyload attribute isn't supported in the vast majority of browsers - https://caniuse.com/#feat=lazyload – igorM Jun 14 '19 at 15:12

Load Google web fonts script link asynchronously

2 Answers2