Question

我想使用Webfont Loader来管理自定义字体的加载，并加载一些Google字体。但是，我不确定如何将它与Gatsby整合。我找到了React wrapper for Webfont Loader，但它希望你像这样使用它：

<WebfontLoader config={config} onStatus={callback}>
  <App />
</WebfontLoader>

在我看来与Gatsby不兼容。有没有办法对它进行调整，以便与Gatbsy合作？还是一种让unwrapped npm webfontloader module适应盖茨比的方法？

Answer 1

看看这些人是如何做到的：https://github.com/smartive/smartive.ch/blob/master/src/layouts/index.js

这个例子仍然比我的知识略高，所以我尝试了一种更简单的方法，它对我来说效果很好（虽然可能不是“最干净”的方法等）

在我的layouts / index.js中导入：

import './main.js'

我有以下内容：

if (typeof window !== `undefined`) {

window.onload=function(){

  var WebFont = require('webfontloader');

  WebFont = {
      typekit: { id: 'psj0mst' }
   };

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

}
}

我必须添加窗口检查，否则在构建gatsby网站进行生产时出现错误。

Answer 2

现在有一个gatsby plugin可以完成这项工作

安装

npm install --save gatsby-plugin-web-font-loader

并使用

plugins: [
{
  resolve: 'gatsby-plugin-web-font-loader',
  options: {
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  }
}

]

如何在Gatsby中使用Webfont Loader？

2 个答案: