gatsby（react）にNoto Sans JPを入れてMaterial-UIのthemeでfont-familyを上書き指定する

メモです。

参考：
https://www.npmjs.com/package/fontsource-noto-sans-jp
https://mrtry.hatenablog.jp/entry/2018/05/07/193920

インストール

npm install fontsource-noto-sans-jp
もしくは
yarn add fontsource-noto-sans-jp

でNoto Sans JPをインストールする。

インポート

gatsby-browser.jsで

import { ThemeProvider } from 'styled-components'
import { MuiThemeProvider } from '@material-ui/core/styles'
import { theme } from './src/utility/theme'
import "fontsource-noto-sans-jp"
import "fontsource-noto-sans-jp/500.css"
import "fontsource-noto-sans-jp/900-normal.css"

などする。

Material-UIのthemeのfont-familyを上書き指定

import { createMuiTheme } from '@material-ui/core/styles'

// fontFamilyを上書き
export const theme = createMuiTheme({
  typography: {
    fontFamily: ['Noto Sans JP', 'sans-serif'].join(','),
  },
})