GastbyJSでGoogle Fontsやセルフホステッドフォントを使う

Google FontsやTypeKitはプラグインがサクッとやってくれる。

www.gatsbyjs.org

しかし自分で用意したフォントを導入するのはなかなか入れるのに手こずった。
自分用にメモ。

$ yarn add gatsby-plugin-web-font-loader

gatsby-config.js

{
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Noto Sans JP'],
        }
      },
    },

これでGoogle Fontsは入る。楽。

自分で用意したフォントを導入

rootフォルダ/staticフォルダに入れて対応した。

ほんとはできるだけjsの管理下にしておいたほうがよいのだけれど、自分の理解不足のせいかフォントが導入できないため、static管理下に。

static/fonts.css

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff') format('woff');
}

gatsby-config.js

{
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Noto Sans JP'],
        },
        custom: {
          families: ['MyFont'],
          urls: [`fonts.css`],
        },
      },
    },

で、static/以下に MyFont.woff を入れる。

ちなみになぜかttf形式だとchromeで以下のエラーが出てフォントが表示できなかった。 理由は不明。

Failed to decode downloaded font: OTS parsing error: incorrect entrySelector for table directory

ttf => woffに変換するサービスを利用してことなきをえた。