Gatsby.jsでAdobe Fontsを使う

Gatsby.jsでAdobe Fontsを使う:

概要

GatsbyでWebFontを使う方法を調べてみました。

今回はAdobe Fontsを使っていきます（Google Fontsなどは適宜置き換えて読んでください）

導入

1. まずはフォントを入れます。
   Adobe Fontsで好きなフォントをアクティベートしてプロジェクトに追加します。
   
   下のような画面が出るので、kitIdをメモする。
   
   
   
   
2. 
   Gatsbyではindex.htmlに直接scriptを貼ることは推奨されていないので、
   webfontloaderというパッケージを使ってロードします。
   
   まずは、yarn add webfontloader。
   
   このフォントをロードしたいコンポーネントで（できればLayout系がいいと思います）
   
   
   
   

   componentDidMount(){ 
     WebFont.load({ 
       typekit: { 
         id: 'xxxxxx' 
       } 
     }); 
   } 
   

   これでフォントはロードされます。
   
   
   
3. 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と合わせて使うと非常に快適にフォントを扱えるのでおすすめです。