NextJS - How to asynchronously load webfonts with webfontloader?

Question

I have a NextJS app in which I load fonts using webfontloader

function load() {
  const WebFont = require("webfontloader");

  WebFont.load({
     google: {
       families: fonts
     }
    });
}

However, it significantly affects performance. I've read that asynchronous loading is possible according to the webfontloader documentation =>

<script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (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>

Apparently, you cannot add such scripts in the Next's Head component.

Is it possible to achieve async webfont loading in Next?

Answer 1

You should probably add that script to the body instead of the head. Or at least mark it with the attribute defer to ensure that it executes after the DOM has been loaded.

e.g.

<script defer>
   ...
</script>