某些字体在Typography.js和盖茨比中不起作用

Question

当我配置typography.js时，有些字体似乎起作用，而其他字体则不起作用。

我不知道为什么，因为下面这两种字体都列在Typography.js主页上：https://kyleamathews.github.io/typography.js/

使用的代码：

typography.js：

import Typography from "typography"

const typography = new Typography({
    baseFontSize: "24px",
    headerFontFamily: ["Lucida Grande"],
    bodyFontFamily: ["Oxygen Mono"],
});

export default typography

gatsby-config.js：

module.exports = {
  siteMetadata: {
     title: 'Chris Maltais',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      },
    },
  ],
};

初学者模板：gatsby默认

库版本：

排版: 0.16.17

gatsby插件-排版: 1.7.19

我还在src/layout/index.js中注释了./index.css的导入。

结果：的Lucida字体将工作，但氧气Mono不会。事实上，任何名字中含有"Mono“的字体都不会。

我是不是遗漏了什么？排版主题是否包含不同的字体？任何帮助都是非常感谢的。

Answer 1

您还需要指定googleFonts数组，如文档的"API“部分所示。氧气Mono是谷歌字体，所以你需要添加这个。Lucida Grande可能已经安装在您的计算机上，但是您当然应该将它与您的网站一起发布。