使用Typography.js和Gatsby的Google字体

Question

我正在学习Gatsby教程，并将Typography JS集成到代码中(https://www.gatsbyjs.org/tutorial/part-three/#using-plugins)。不过，我在使用谷歌字体时遇到了麻烦。他们只是不加载。

这是我的src/utils/typography.js文件

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  googleFonts: [
    {
      name: "Bonbon",
      styles: ["700"],
    },
    {
      name: "Hanalei",
      styles: ["700"]
    }
  ],
  headerFontFamily: ["Bonbon"],
  bodyFontFamily: ["Hanalei"],
})

export default typography

这是我的gatsby-config.js文件

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

我选择的字体看起来与标准字体有很大的不同，纯粹是为了一旦我得到了他们的工作，我就会立即知道。但我没能让他们工作。我是不是漏掉了什么？baseFontSize和baseLineHeight都按预期工作，因此正在读取util文件。

Answer 1

这似乎是特定于您选择的字体的问题，他们不把样式作为google字体的选项，在样式中传递一个空数组可以解决问题

{
  name: "Bonbon",
  styles: [],
},
{
  name: "Hanalei",
  styles: []
}

在调试这类问题时，还要检查开发人员工具中的network选项卡，看看是否正确下载了必要的资产，这就是我想出这个解决方案的方法