Is it possible to overwrite gatsby-theme-blog's fonts?

Question

I am using gatsby-theme-blog, and would like to use fonts other than default "Montserrat" which comes with "Wordpress 2016" theme.

If possible, I'd like to change fonts to "Work Sans", which is used by "fairyGate" theme for headers.

From Shadowing in Gatsby Themes I know how to create files under my projects to replace original files. However, all approaches have failed and the headings in Posts page stays Montserrat.

Here's what I've tried:

1. Install theme and its dependent typeface:

// 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. Create files to shadow original typography:

// 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,
})

Any suggestion is appreciated!

Answer 1

1. Create a layout file and wrap all your pages inside of it. Something like this could work
2. Use CSS in JS to scope your styles or something similar where you can specify the font-style and override css styles in a scoped and modular way
3. Use Gatsby plugin google fonts to bring your choice of fonts