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(','),
},
})
import { createMuiTheme } from '@material-ui/core/styles'
// fontFamilyを上書き
export const theme = createMuiTheme({
typography: {
fontFamily: ['Noto Sans JP', 'sans-serif'].join(','),
},
})
Author And Source
この問題について(gatsby（react）にNoto Sans JPを入れてMaterial-UIのthemeでfont-familyを上書き指定する), 我々は、より多くの情報をここで見つけました https://qiita.com/AyakoKataoka/items/01c8f30b5d71ac8e85d4著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .