异步加载 Google 网络字体脚本 link

Question

我试图通过做一些调整来提高我的网站性能，我找到了 google 网络字体脚本来加载字体异步，问题是字体加载异步但不是脚本 src link 所以我只是将 css 的问题移到了 js.

我的实际代码是：

<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']]
      }
});

我试过使用 async 和 defer 但在脚本 src 上，但它没有用（它消除了页面块渲染，但字体没有像其他脚本使用异步那样加载）。

那么删除脚本 src link 的最佳方法是什么？

Answer 1

给你，将其包含在正文中，就在 </body> 之前而不是 head 标签

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

这使得字体加载在之后。

但在您的情况下，请使用 Oswald 字体而不是 Noto Serif。

最初由用户 "Paddy" 在此处回答：

Answer 2

试试这个。

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

异步加载 Google 网络字体脚本 link

Load Google web fonts script link asynchronously

javascript

fonts

asynchronous

google-webfonts