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

公開日：2019年04月07日
更新日：2019年06月12日

GatsbyJS

関連プラグインをインストール
Tyypographyの設定を作成
ハマったところ

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

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

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

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

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

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

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

Tyypographyの設定を作成

先ほどgatsby-config.jsのpathToConfigModuleに設定した場所に設定した名前の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のスタイルの打ち消してしまっているスタイルを削除して無事反映された。