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.