【GatsbyJS製ブログ】フォントをGoogleフォントに変更する

2021年9月10日2023年12月25日

Gatsbyのデフォルトの日本語フォントはお世辞にも見やすいもの、とは言えません。なんかこう「海外産」って感じです。今回はフォントの変更をしていきたいと思います。

この記事はこんな人にオススメ

Gatsbyのフォントをもっとカッコよく変更したい！

※ ２０２２年５月１２日追記

「Typography.jsをインストールしてフォントを読み込ませる」とサイトのパフォーマンス的に非常によくなかったので、Googleフォントを自前で準備しておく方法を載せておきます。こちらがオススメです。

Fontsourceを使ってGoogleフォントをインストール

Gatsby製ブログを立ち上げてしばらく経ってから、ふと「パフォーマンスってどうなんだろう？」とLighthouseで計測した結果、びっくりするほど低かったんです。「爆速って言ってたじゃねぇか！！」とキレそうになったのは置いといて、経緯は別記事で説明しますが、大きな原因の一つに「Googleフォント」がありました。ですので、その対応をした健忘録としても残しておきます。

Fontsourceを使って自前でフォントを準備します。公式ドキュメントはこちら（英語です）。

STEP

使うフォントを選ぶ

この方法はフォントを個別にインストールするので、そのフォントを選びます。

GoogleFontsから使いたいフォントを選びましょう。

今回は「Noto Sans Japanese」をインストールしてみます。

STEP

選んだフォントをインストール

使いたいフォントをインストールします。

$ yarn add @fontsource/noto-sans-jp

「noto-sans-jp」の部分はインストールするフォントによって変えてください。こちらから先ほど選んだフォントを探してください。

STEP

layout.jsでインポートする

それぞれのページはlayout.jsを使って作っていると思うので、そこでフォントをインポートします。

（layout.jsを使っていないページがあるときは、そこでもインポートしないといけないかもしれません。すいません、未確認です。）

import "@fontsource/noto-sans-jp"
…

使うフォントウェイトが決まっている場合は（先ほどのGoogleFontsで確認できます）、そのフォントウェイトのみインポートすることもできます。これでさらにフォント周りが軽量化できます。

import "@fontsource/noto-sans-jp/400.css"
…

STEP

CSSのfont-familyプロパティでフォント変更

あとはCSSでフォント変更するだけです。bodyのfont-familyプロパティに指定すると全体にフォントが適応されるはずです。

このページにも書いてありますが、以下のようにして指定します。/src/style.cssでサイト全体に関わるCSSの設定ができるので、ここのbodyに以下を加えます。

body{
  font-family: "Noto Sans JP", sans-serif; //←これ
  …
}

こちらでフォントを選んだ際に、どのように指定すればいいかも書いてくれています。ありがたし。

クマ

結果こっちの方がわかりやすくて楽だった気がします。

こちらの方法をオススメしますが、一応以下にTypography.jsを使った方法も残しておきます。

BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました！

プログラマーの心に刺さる、「プログラミングあるある」。毎日使いたくなること間違いなし！

LINE STORE

クマのプログラミング日記

Typography.jsをインストールしてフォントを読み込ませる

以下のコードをターミナルで打って、Typhography.js周りをインストールします。

$ npm install gatsby-plugin-typography react-typography typography

クマ

いつものように「yarn add」でもOKですよー。ここでプラグインをインストールするのに、このあと結局typography.jsを自分で作る、というのが違和感がありますが…。

gatsby-config.jsにプラグインの指定します。

plugins: [
    …
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,  //このディレクトリとファイルは後で自分で作る。
      },
    …

今プラグインで指定したディレクトリ「/src/utils/」と「typogrtaphy.js」を自分で作ります。typogrtaphy.jsの内容は以下のように設定します。

import Typography from "typography"
const typography = new Typography({
    baseFontSize: "16px",
    baseLineHeight: 1.666,
    googleFonts:[
        {
            name: "Noto Sans JP",
            styles: ["400"],
        }
    ],
    headerFontFamily: ["Noto Sans JP"],
    bodyFontFamily: ["Noto Sans JP"],
})
export default typography

このtypography.jsはフォントの指定以外にもフォント周りの設定ができるので、お好みに応じてイジってOKです。ちなみにプロパティの例はこんな感じ。

title: テーマのタイトル
baseFontSize: 基本のフォントサイズ。デフォルトは16px。ピクセル指定。
baseLineHeight: 基本のLine Hight。デフォルトは1.45。単位なし。
googleFonts: Google Fontの設定。今回お世話になったのはコレ。
headerFontFamily: ヘッダーに対してのフォントファミリースタックの配列。フォントファミリーは「このフォントの配列にあるやつ、前から順に使ってー」の意味。
bodyFontFamily: ボディに対してのフォントファミリースタックの配列。
headerColor: ヘッダーの基本フォントカラー。
bodyColor: ボディの基本フォントカラー。

などなど。

クマ

他にも様々なプロパティがあるので、興味のある人はTypography.jsをチェック！英語だけど、プログラミング言語は万国共通！最後の方に各プロパティの説明があります。

CSSのfont-family設定を消去する

私の環境では、ここまで設定でフォントの変更が適応されませんでした。原因はCSSのfont-family設定にあります。ここでフォントの指定を別途しているので、上記の変更が適応されませんでした。私が使っているテンプレート「Gatsby Starter Blog」ではstyle.cssに記述していたので、ここを消去します。もし、他のテンプレートを使っていてフォントが適応されない場合は、CSSのfont-familyを探し出して、消去してください。

…
body {
  /* font-family: var(--font-body); */  ←消去する。他にもあると思われるので、全部消去する。
  font-size: var(--fontSize-1);
  color: var(--color-text);
}
…

CSSのfont-familyは全て消去してください。

上手くフォントが適応されると次のようになります。

CSSのfont-familyプロパティでフォント変更

こちらはGatsby、というよりCSSの話になりますが、サイトの一部だけフォントを変更したい、という場合があります。

このようなときは、CSSのfont-familyプロパティで指定してあげましょう。

font-familyプロパティの注意点

いきなりですが、font-familyプロパティを使う際の注意点です。

まず前提として、font-familyで「このフォントを表示してね」と言っても、実際に表示されるフォントはユーザー側の環境に依り、指定されたフォントが無い場合は代替フォントで表示されます。

ということで、font-familyプロパティでフォントを指定しますが、「,」で区切っていきながら複数指定することができます。また、複数指定した場合、先に書いたフォントが優先となります。

加えて、フォントの指定方法ですが、フォントファミリー名と総称フォント名の2種類の指定ができます。

フォントファミリー名：いわゆる個別のフォント名です。”MS Pゴシック”や”メイリオ”など、指定する場合は””で囲み、正式な固有名称で指定します。
総称フォント：「ゴシック体」「明朝体」など、個別のフォント名ではなく、大きな括りのフォントです。例えば「sans-serif」という総称フォントはゴシック体の括りになりますが、この総称フォントには”Arial”や”メイリオ”などが属する、といった感じです。

font-familyプロパティの簡単な説明

クマ

使い方は次のとおりです。

.fonttest{
  font-family: ”メイリオ”, sans-serif;
}

タグやクラスに対して、

font-family: ”フォントファミリー名” ;

font-family: 総称フォント名 ;

でフォントの指定ができます。上記のように「,」で並べて書いても大丈夫ですが、先にあるフォントが優先されます。

上の例で言えば、フォントの優先順位は”メイリオ” > sans-serif です。

クマ

sans-serifはゴシック体の総称フォントです。”メイリオ”がなければ、sans-serifに属する他のゴシック体フォントで代替される、ということですね。

まとめ

フォントはサイトの印象を決める重要な要素です。サイトのニーズや世界観に合ったフォントを選べるといいですね。

クマ

そういうセンスも磨いていきたいものです。

次はヘッダーやフッターをパーツ化して、ビルドの際にテンプレートファイルに挿入していきます。

Gatsbyを学習している方への私からのオススメ！

私が読んでよかったな、と思うGatsbyの学習をするのにオススメの本を紹介しておきます。

画も多くてとても読みやすく、ステップバイステップでGatsbyJSのサイトを作ることができます！

また、Gatsbyを学習する上で、Reactを同時に学習することもオススメします。

こちらも、まず構成や見た目がとても読みやすい本です。加えてReactに対しての専門的な知識を丁寧に学ぶことができます。ここでReactに対する基礎知識をしっかりしておくと、Gatsbyに対する見方が変わって、Webページをサクサク作ることができるようになります！

あと、色々と調べたのですが、Reactの学習ならUdemyもオススメです。必要な知識を１動画単位で購入できるので、学習に無駄がないです。Reactってあんまり学習できるプログラミングスクールみたいなのがないんですよね…。「React」と検索するだけで大量に動画がでてきます！

Udemy 自分のライフスタイルに合わせて学ぼう。対象コースが¥1,800から

【GatsbyJS製ブログ】フォントをGoogleフォントに変更する

Fontsourceを使ってGoogleフォントをインストール

Typography.jsをインストールしてフォントを読み込ませる

CSSのfont-family設定を消去する

CSSのfont-familyプロパティでフォント変更

font-familyプロパティの注意点

font-familyプロパティの簡単な説明

まとめ

tomokichi.90