"Script as an output lock file" after using Web Font Loader

Question

I'm trying to remove the <Script as a display lock file "error from a Google Pagespeed reading caused by loading a Google web font, the Internet tells me to use Web Font Loader to download async fonts. I put the following javascript in my footer, the font loaded well, but I am still getting a Render lock error in page search results in pagepeed format.

Note. The Font Render lock error appears only in the mobile test, and not on the desktop.

<script>
      WebFontConfig = {
         google: {
            families: ['Archivo Narrow:300,400,700']
         }
      };

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

EDIT:

Trying to add a script tag before closing the tag will still result in a rendering block file error:

<script>
   WebFontConfig = {
      google: {
         families: ['Archivo Narrow:300,400,700']
      }
   };

   (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;
      document.body.appendChild(wf);
   })(document);
</script>