投稿日 2020/09/17

Gatsby.jsのプロジェクトにGoogle Fontsを導入する

Gatsbytypography

Google Fonts(Noto Sans JP)をインストールします。

gatsby-starter-blog を導入していると、フォントの情報はsrc/utils/Typography.jsにすでに存在します。 初期状態はこんな感じ。

src/utils/Typography.js 
import Typography from 'typography'
import Wordpress2016 from 'typography-theme-wordpress-2016'

Wordpress2016.overrideThemeStyles = () => {
  return {
    'a.gatsby-resp-image-link': {
      boxShadow: `none`,
    },
  }
}

delete Wordpress2016.googleFonts

const typography = new Typography(Wordpress2016)

// 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

最終的にこれを編集して Google Fonts を使えるようにしていきます。

テーマインストール

typography.jsが提供するテーマをインストールします。
(typography のプラグインはすでにインストールされています)

yarn add typography-theme-github

typography.js を書き換え

Wordpress2016 はもう使わないので削除し、theme.googleFonts を追加します。 ヘッダとボディ部にも指定を追加します。

src/utils/typography.js 
import Typography from 'typography'
import theme from 'typography-theme-github'

theme.googleFonts = [
  {
    name: 'Noto+Sans+JP',
    styles: ['400'],
  },
]

theme.headerFontFamily = ['Noto Sans JP']
theme.bodyFontFamily = ['Noto Sans JP']

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

その他の機能

フォントは複数同時に読み込むことができ、テーマの上書きも可能です。 こういう感じのもアリ。typography が一括管理できてとても便利。

src/utils/typography.js 
import Typography from 'typography'
import config from '../../config/SiteConfig'

const typography = new Typography({
  baseFontSize: config.baseFontSize,
  baseLineHeight: 1.66,
  scaleRatio: 3.157,
  headerFontFamily: [config.headerFontFamily, 'sans-serif'],
  bodyFontFamily: [config.bodyFontFamily, 'sans-serif'],
  headerWeight: 700,
  googleFonts: [
    {
      name: config.headerFontFamily,
      styles: ['700'],
    },
    {
      name: config.bodyFontFamily,
      styles: ['400'],
    },
  ],
})

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

export default typography

参考