Можно ли перезаписать шрифты gatsby-theme-blog?

Question

Я использую gatsby-theme-blog и хотел бы использовать шрифты, отличные от стандартных шрифтов "Montserrat", которые поставляются с темой "Wordpress 2016".

Если возможно, я бы хотел изменить шрифт на "Work Sans", который используется темой " fairyGate" для заголовков.

Из " Затенения в темах Гэтсби" я знаю, как создавать файлы в своих проектах для замены исходных файлов. Однако все подходы не увенчались успехом, и заголовки на странице сообщений остаются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"
  }
}

2. Создайте файлы для теневого копирования оригинальной типографики:

// 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. Используйте CSS в JS для определения области ваших стилей или чего-то подобного, где вы можете указать стиль шрифта и переопределить стили css модульным способом с ограниченным объемом
3. Используйте плагин Gatsby google fonts, чтобы выбрать шрифты на ваш выбор