This is my first time to change font-family in Gatsbyjs.

I use this template

https://www.gatsbyjs.com/starters/netlify-templates/gatsby-starter-netlify-cms

I could change font but some part are not changing.

Here is my current code

import Typography from "typography"
import Theme from "typography-theme-moraga"

Theme.googleFonts.push({
// Noto Sans JP
  name: "Noto+Sans+JP",
  styles: ["400"],
})
Theme.bodyFontFamily = ["Noto Serif JP", "Roboto", "serif"]
Theme.headerFontFamily = ["Noto Serif JP", "Roboto", "serif"]
Theme.htmlFontFamily = ["Noto Serif JP", "Roboto", "serif"]
Theme.textareaFontFamily = ["Noto Serif JP", "Roboto", "serif"]

const typography = new Typography(Theme)

// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
  typography.injectStyles()
}

export default typography export const rhythm = typography.rhythm export const scale = typography.scale

I thoguht src\components\all.sass is css section. but I couldn't find font-family line which I would like to adjust. so I looked css using firefox developer tool and I see file name called common.css but I couldn't find it.

Could you teach me how to change main all font-family and adjusting specific area.