Google Fontsの導入

ウェブの海

Google Fontsは名前がおもしろいフォントがたくさんあるので、たまにチェックすると楽しいです。

Google FontsをGatsbyJSに導入する

まずはnpmから。

$ npm install gatsby-plugin-google-fonts --save

特に他に依存するプラグインはないようです。

設定の書き足し

module.exports = {
  siteMetadata: {
    // 省略
  },
  plugins: [
    // 省略
    {
     resolve: `gatsby-plugin-google-fonts`,
     options: {
       fonts: [
         `Modern Antiqua`,
       ],
       display: 'swap',
     }
   }
  ],
}

fonts:のところにフォント名を指定します。
太さも数字で指定できます。
こんなかんじ。

`source sans pro\:300,400,400i,700`

iはイタリックですね。

使いたいページでフォントを指定する

h1 {
  font-family:'Modern Antiqua',cursive;
}

今回はすんなりいきました。

タイトルとURLをコピーしました