概要
GatsbyでWebFontを使う方法を調べてみました。
今回はAdobe Fontsを使っていきます(Google Fontsなどは適宜置き換えて読んでください)
導入
まずはフォントを入れます。
Adobe Fontsで好きなフォントをアクティベートしてプロジェクトに追加します。
下のような画面が出るので、kitId
をメモする。
-
Gatsbyではindex.htmlに直接scriptを貼ることは推奨されていないので、
webfontloaderというパッケージを使ってロードします。
まずは、yarn add webfontloader
。
このフォントをロードしたいコンポーネントで(できればLayout系がいいと思います)componentDidMount(){ WebFont.load({ typekit: { id: 'xxxxxx' } }); }
これでフォントはロードされます。
gatsby develop
はこれで通るのですが、gatsby build
はwebpackのビルドの過程でwindow is not defined
を吐いて失敗するので、このページの通りに従い、
gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, loaders, actions}) => {
if (stage === 'build-html') {
actions.setWebpackConfig(
{
module: {
rules: [
{
test: /webfontloader/,
use: loaders.null()
}
]
}
}
);
}
}
を追加すれば無事にビルドが通ります。ちなみに、Reactのコンポーネント内でwindow
やdocument
を参照している箇所がある場合も同様のビルド失敗をしますが、その時はwindow
が定義されているかどうかをチェックする(typeof)処理を書くことでwebpackコンパイル時に落ちないようになります。
まとめ
Typography.jsと合わせて使うと非常に快適にフォントを扱えるのでおすすめです。