异步加载 Google 网络字体脚本链接

Question

我正在尝试通过一些调整来提高我的网站性能，并且我找到了 google web fonts scripts 来加载字体 异步，问题是字体加载 异步但不是脚本 src 链接，所以我只是将 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']]
      }
});

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

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

Answer 1

好了，在正文中包含这个，就在</body> 之前，而不是头部标签

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

这使得字体加载它上面的所有内容。

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

最初由用户“Paddy”在这里回答：

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

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>