Google Fontsを適用する方法とそのコツ |はてなブログ

本サイトはプロモーションが含まれています。

04/18/2025

Google Fonts の導入は簡単なはず。ところが、はてなブログでフォントを変える際に、思っていたよりも手間取ってしまいました。この経験を忘備録として記録しつつ、同じ悩みを抱える方々とシェア（共有）したいと思います！

Contents

テーマに指定されているフォントを自分好みに変更しよう

フォントを変えるということ

私のはてなブログで使用しているテーマは現在Color Bookです。
デフォルトのフォントは、以下で指定されているようです。

ブログタイトルのフォント

apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif

本文のフォント

Helvetica Neue, Helvetica, Arial, Hiragino Kaku Gothic Pro, Meiryo, MS PGothic

フォントは先頭から適用されるので、Windowsなら、タイトルはHelvetica 、本文はHelvetica Neueが適用されている状態でした。

ブログタイトルのフォントにapple-systemというのがありますが、これはGoogleフォントを指定する場合は必要がありません。
理由は後ほど説明します。

apple-system

Appleのデバイス（iOSやmacOS）でネイティブに使用されるフォントを指定します。
これにより、フォントの読み込み時間が短縮され、ページの表示速度が向上します。

私のはてなブログでのフォントは、kosugi Maruです。

Google Fonts小杉丸（Kosugi Maru）は、ここから取得できます。

デフォルトのHelvetica Neueの文字はこんなフォントです。

変更した小杉丸の文字はこんなフォントです。

では、こんな感じにお好きなフォントに変更する方法です。

Googleフォントに変更する

バックアップを取る
Googleフォントを選ぶ
Googleフォントを設定する

バックアップを取る

CSSを触って、間違えてしまうとデザインが崩れることも。
変更する前に書き換えるコードを、デザイン→ build →{}CSSから、
右クリック→すべて選択→コピー。
メモ帳やテキストエディタに貼り付けて保存する。
Windowsなら「メモ帳」を使います。
Macは「テキストエディット」を使います。
変更後にデザインが崩れたら、コピーした内容を戻すだけで完了です。

Googleフォントを選ぶ

ここからGoogleフォントにとびます。
使いたいフォントが決まっているのであれば検索します。

使いたいフォントが決まっていない場合は、Filtersから項目を絞っていきます。
使われるフォントは先頭から優先されますが、何個選んでも大丈夫です。

以下は例なので、お好きな項目で選んでください。

日本語（japanese）とサンセリフ（sans selif）で絞って検索してみています。
Noto Sans Japaneseをクリックして選びます。

右上のGet Fontをクリックします。

右側の上の段Get embet codeをクリックします。

Embed code in the <head> of your htmlのソースをコピーします。

まだgoogleフォントのページは閉じないでください。

apple-systemを使用しなくていい理由

オンラインで接続されている場合、Webページを表示している環境が、WindowsでもmacでもiPhoneでもAndroidでも、Webページを表示したタイミングでフォントファイルをダウンロードして、そのフォントでWebページのテキストを表示できるようになります。
Webフォントの使用を前提としてデザインを制作すれば、どのような環境でもデザイナーが意図したデザイン通りにテキストが表示できるようになります。
私のiPhone、ipadでもちゃんと変更されました。

Googleフォントを設定する

はてなブログの設定→詳細設定→<head>要素にメタデータを追加にペーストします。
保存をクリックするのを忘れないように！
Googleのページに戻り、

先ほどコピーしたソースの下の枠から、font-family: “Noto Sans JP”, serif;
この部分だけメモ帳などにコピーします。
下記のコードをコピー・編集して自分のフォントを当てはめてください。
出来たコードを、
ブログのデザイン→ build →{}CSS　に貼り付けて保存します。

/*フォント１つの場合*/
html, body {
    font-family: "Noto Sans JP";
   }

/*複数のフォントの場合*/
html, body {
    font-family: "Noto Sans JP","kosugi Maru", serif,"Zen Maru Gothic", serif", serif;
   }

フォントの変更が適用される箇所

試行錯誤していて気づいたのですが、上記の設定ですと、タイトルの文字も変わります。
タイトルの文字を変えたくない場合は、

/*フォント１つの場合*/
.entry-content p {
    font-family: "Noto Sans JP";
   }

/*複数のフォントの場合*/
.entry-content p {
    font-family: "Noto Sans JP","kosugi Maru", serif,"Zen Maru Gothic", serif", serif;
   }

こちらをペーストして同じように編集し
ブログのデザイン→ build →{}CSS　にペースト・保存してください。
本文のフォントのみ変更されます。

Googleフォントの最大のデメリットの一つは、その利用がインターネット接続に依存していることです。
Googleのサーバーに問題が発生した場合や、ユーザーのインターネット接続が不安定な場合、フォントが正しく表示されない可能性があります。

Googleフォントに変更する方法でした。

さまざまなサイトで異なるコードが紹介されており、少々混乱しましたが、自力で解決することができました（もしかしたら古い情報を参考にしていたのかもしれません）。
また、本文とタイトルを別々に指定する必要がなく、1つのコードで同時に変更できることを知ったのは小さな発見でした。
この記事が少しでもお役に立てば幸いです！