Gatsbyでフォント関連のスタイルの設定をする

Gatsbyでフォント関連の指定を行うには、公式ドキュメントにはTypography.jsというライブラリを使用する方法が紹介されているので、そちらの方法で設定をする。

Typography.js | GatsbyJS

Typography.js

関連プラグインをインストール

Typography.jsに加えてgatsby-plugin-typographyreact-typographyをインストールする。

npm i  -S gatsby-plugin-typography react-typography typography

インストールが終わったらgatsby-config.jspluginsに以下の記述を追加する。

plugins: [
  {
    resolve: `gatsby-plugin-typography`,
    options: {
      pathToConfigModule: `src/utils/typography`,
    }
  }
]

これでGatsbyへ設定を反映させる準備が整った。次に設定ファイルを作っていく。

Tyypographyの設定を作成

先ほどgatsby-config.jspathToConfigModuleに設定した場所に設定した名前のJSファイルを作成する。

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.75,
  bodyFontFamily: [
    "-apple-system",
    "BlinkMacSystemFont",
    "Helvetica Neue",
    "游ゴシック体",
    “Yugothic",
    "游ゴシック",
    "Yu Gothic",
    "Verdana",
    "メイリオ",
    "sans-serif",
  ],
})

export default typography

以上で設定は完了。

ハマったところ

src/components/layout.cssに記述されていたスタイルに打ち消されて設定が反映されなかった。 layout.cssのスタイルの打ち消してしまっているスタイルを削除して無事反映された。