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

库版本：

印刷术：0.16.17

gatsby-plugin-typography：1.7.19

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

结果： Lucida Grande字体可以使用，但是Oxygen Mono不能使用。实际上，任何名称中带有“ Mono”的字体都不会。

我想念什么吗？排版主题包含不同的字体吗？任何帮助表示赞赏。

Answer 1

您还需要指定googleFonts数组，如文档的“ API”部分所示。 Oxygen Mono是Google字体，因此您需要在此添加。 Lucida Grande可能已经安装在您的计算机上，但是您当然应该随网站一起提供它。

某些字体在Typography.js和Gatsby中不起作用

1 个答案: