NextJS-如何使用webfontloader异步加载webfont

Question

我有一个NextJS应用程序，在其中我使用webfontloader 加载字体

function load() {
const WebFont = require("webfontloader");
WebFont.load({
google: {
families: fonts
}
});
}

但是，它会显著影响性能。我已经读到，根据webfontloader文档=>

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

显然，您无法在Next的Head组件中添加这样的脚本。

是否可以在Next中实现异步Web字体加载？

Answer 1

您可能应该将该脚本添加到body而不是head。或者至少用属性defer标记它，以确保它在加载DOM后执行。

例如

<script defer>
...
</script>