是否有可能覆盖盖茨比主题博客的字体？

Question

我正在使用盖茨比主题-博客，并希望使用默认的“蒙特塞拉特”以外的字体，这是与"Wordpress 2016“主题。

如果可能的话，我想将字体更改为"Work Sans"，这是"fairyGate“主题用于标题的。

在盖茨比主题中的阴影中，我知道如何在我的项目下创建文件来替换原始文件。但是，所有方法都失败了，Posts页面中的标题保持为Montserrat。

以下是我尝试过的：

1. 安装主题及其依赖的字体：

// package.json
{
  "dependencies": {
    "@theme-ui/typography": "^0.3.0", // to use `toTheme` method
    "typeface-work-sans": "^0.0.72", // the font I'd like to use
    "typography-theme-fairy-gates": "^0.16.19"
  }
}

1. 创建文件以隐藏原始排版：

// my-project/src/gatsby-theme-blog/gatsby-plugin-theme-ui/typography.ts

import "typeface-work-sans"

import { toTheme } from "@theme-ui/typography"
import fairyGates from "typography-theme-fairy-gates"

export default toTheme(fairyGates)

// my-project/src/gatsby-theme-blog/gatsby-plugin-theme-ui/index.ts


/* I duplicate most codes in original gatsby-plugin-theme-ui/index.js 
   intentionally to avoid other possible failing factors */

import merge from "deepmerge"
import typography from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/typography"
import colors from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/colors"
import styles from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/styles"
import prism from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/prism"

export default merge(typography, {
  initialColorMode: `light`,
  colors,
  fonts: {
    heading: `Work Sans, sans-serif`, // <- Changing font here doesn't work as expected!
    monospace: `Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace`,
  },
  sizes: {
    container: 672,
  },
  styles,
  prism,
})

任何建议都是非常感谢的！

Answer 1

1. 创建一个布局文件并将所有页面包装在其中。像这这样的东西可以起作用
2. 使用JS中的CSS对样式或类似的样式进行范围调整，您可以指定字体样式，并以范围和模块化的方式覆盖css样式。
3. 使用Gatsby插件google字体将您选择的字体