我正在学习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文件。