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

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

盖茨比-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 中不起作用

Certain fonts not working in Typography.js and Gatsby

frontend

typography

gatsby