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

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

フォント変更前
この記事はこんな人にオススメ
  • Gatsbyのフォントをもっとカッコよく変更したい!

※ 2022年5月12日追記

「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スタンプになりました!

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

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に属する他のゴシック体フォントで代替される、ということですね。

まとめ

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

クマ

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

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

今の仕事に満足していますか?やりがい、給料、ワークライフバランス…現状に不満を持ったり嘆いているのはもったいないと思います。

今の時代、海外のようにキャリアアップのために活動していくのは、志の高い人には必然とも言えます。動かない人は、それなりの人生を歩むしかありません…。「面倒だ」という人はそれでもいいでしょう。しかし、少しずつでも前向きに活動する人は、最終的に「面倒だ」という人よりも遥かに充実したキャリアを歩むことができます

そこで、これからのキャリアを見据えた相談をしてみませんか?実力派エージェントが、今の仕事環境より、もっと高待遇の職場選びをサポートしてくれます!

あなたへオススメ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次