前回GoogleフォントをReactで扱う方法をやっていきました。
いろいろ調べていたらGoogleフォントをGatsbyでの使い方があるらしくて、今回はそのことについてやっていきたいと思います。
Googleフォントについて詳しく知りたい方は前回の記事を参考にしてください。
この記事でわかること
・GatsbyでのGoogleフォントの使い方
今回もこんな感じでやっていきたいと思います。
Google FontsをGatsbyで使う方法
プラグインをインストール
前回はGoogleフォントのサイトからインポートしてGoogleフォントを使用する方法を紹介しました。
今回はプラグインを使用してGoogleフォントを使用する方法を紹介したいと思います。
プラグインのインストール方法と設定する方法は、公式サイトを参考にします。
gatsby-plugin-prefetch-google-fonts
gatsby-plugin-prefetch-google-fonts A Gatsby plugin to download and prefetch Google Fonts. Can increase performance as opposed to loading...
gatsbyの公式サイトは事細かく載っているので、基本的に何かするときは参考にさせていただいています。
しかし、英語で全て書かれているので理解しづらい部分が多くあると思いますので、この記事を参考にしていただければと思います。
まずは、プラグインを下記のようにインストールしましょう。
yarn add gatsby-plugin-prefetch-google-fonts
// or
npm install --save gatsby-plugin-prefetch-google-fontsインストールができたらGoogleフォントで好きなフォントを選びましょう。
Googleフォントで好きなフォントを選ぶ
下記のGoogleフォントからフォントの種類やサイズなどを選びます。
Google Fonts
Making the web more beautiful, fast, and open through great typography
僕は今回はNoto Sans JPというフォントを選択します。
下記の動画のようにどんな種類があるかみておきましょう。
サイズは400と700のサイズを使いたいので、設定していきます。
フォントの種類の設定
今はプラグインしかインストールしてないので、gatsby-config.jsファイルにプラグインとフォントの内容を追加していきます。
下記のように追加すれば大丈夫です。
plugins: [
{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: `Noto Sans JP`,
variants: [`400`, `700`],
},
],
},
}
]これでGoogleフォントの設定ができました。
これだけでGoogleフォントを使うことができます。
gatsbyでのGoogleフォントの使用方法は以上です。
すぐに設定できてしまうので、gatsbyを使う際にはプラグインでGoogleフォントを使ってみてください。
まとめ
Gatsbyではいろんなプラグインがあります。
その中で今回はGoogleフォントについてやっていきました。
Gatsbyのプラグインでできないことないんじゃないかと思うくらい種類が方法です。
TwitterやInstagramとかの投稿などもプラグインを使えば簡単にできるとのことなので、次回はそのことについて書いていこうと思います。
ぜひウェブサイトを作る際にはgatsbyを使ってみてください。
最後まで読んで頂きありがとうございました。
まとめ
今回はGoogleフォントについて書きました。
Webサイトを作ったり、イラストレーター画像を作る際には大変便利なサービスです。
プログラミングを勉強している方はぜひ使ってみてください。
最後まで読んで頂き、ありがとうございました。