GatsbyウェブサイトでGoogleFontsを使う方法
見出し画像

GatsbyウェブサイトでGoogleFontsを使う方法

にしまつ@マーケティング・サイエンティスト

ウェブサイトのデザインをしたいときに、フォントを変えるとけっこう雰囲気が変わったりします。

今回は、無料で使えるGoogleFontsのフォントを使って文字の表示を変更してみます。

GoogleFontsから使いたいフォントを選ぶ

フォントを使うためにはまず、どんなフォントがあるのか確認したいですよね。GoogleFontsでは、気づかないうちにフォントが追加されていることもあるので、たまに確認すると面白いかもしれません。

以下のリンクから、GoogleFontsにある日本語フォントの一覧を見ることができます。

[Search fonts]と[Custom]の右側にある部分に文字列を入れると、その文字列でフォントを表示してくれます。ローマ字、ひらがな、カタカナ、漢字が含まれる文字列を入れておくとわかりやすいと思います。

スクリーンショット 2021-12-13 23.57.25

とりあえず今回は、見出し用に"Zen Kaku Gothic New"と本文用に"Zen Old Mincho"を使ってみることにします。

スクリーンショット 2021-12-14 0.11.45

Fontsourceで選んだフォントを探す

fontsourceはフォントをnpmでインストールできるようにしてくれています。以下のウェブサイトから、先ほど選んだフォントを探してみましょう。

中央にあるsearchを押すと以下の様な画面になります。[Languages]で[Japanese]を選択しておくと探しやすいです。

スクリーンショット 2021-12-14 0.14.27

"Zen Kaku Gothic New"と"Zen Old Mincho"が見つかりました。これらのページからインストールする方法がわかります。

スクリーンショット 2021-12-14 0.17.08

今回はnpmを使っているので以下の2つのコマンドになりますね。

npm install @fontsource/zen-kaku-gothic-new
npm install @fontsource/zen-old-mincho

念の為、ライセンスも確認しておきましょう。

今回利用するフォントは両方とも、SIL Open Font License 1.1でした。

Gatsbyウェブサイトでフォントを利用する

基本的には、gatsby-brower.jsやレイアウトのファイルなどでインポートするのが良いですが、特定のファイルでしか使わないなら、そのコンポーネントでインポートするのも良いでしょう。

今回は、ページコンポーネントで使ってみます。

最初に、インストールしたフォントをインポートします。

import "@fontsource/zen-kaku-gothic-new"
import "@fontsource/zen-old-mincho"

あとはこのフォントをCSSで指定するだけです。どの様な名称でfont-familyを指定するかはFontsourceを見ればわかります。今回の場合は、以下の2つとなりました。

const Gothic = styled.p`
 font-family: "Zen Kaku Gothic New";
`
const Mincho = styled.p`
 font-family: "Zen Old Mincho";
`

あとはこのスタイルを適用する文字列を指定するだけで完了です。

スクリーンショット 2021-12-14 0.37.41

実際にページで表示してみるとなんだか印象が変わるのではないでしょうおか?

スクリーンショット 2021-12-14 1.06.18

実装結果

まとめ

簡単に新しいフォントを試すことができました。気になるフォントがあれば、どんどん使っていきたいですね!とはいっても使いすぎても、ウェブサイトが重くなるし、見づらくなるので抑え気味にします笑

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります!(*´ー`*)ワクワク

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
スキありがとうございます!ぜひぜひフォローもお願いします(*´ー`*)
にしまつ@マーケティング・サイエンティスト
「論語と算盤」が両立する会社が素晴らしいように 「マーケティングとエンジニアリング」が両方できる人も素晴らしい …"光と闇が両方そなわり最強に見える"理論である。(違います) 最近の興味は主にPython(Django)、AWS、機械学習(ML)、行動経済学、マーケティング