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

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

07/30/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の文字はこんなフォントです。

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

nalu

ではさっそく、お好きなフォントに変更する方法です。

Googleフォントに変更する

手順

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

①　バックアップを取る

CSSを触って、間違えてしまうとデザインが崩れる場合があるのでバックアップを取りましょう。

変更する前に書き換えるコードを、
デザイン→ build →{}CSSから、
右クリック→すべて選択→コピー。
メモ帳やテキストエディタに貼り付けて保存する。

Windowsなら「メモ帳」を使います。
Macは「テキストエディット」を使います。
変更後にデザインが崩れたら、コピーした内容を戻すだけで完了です。

②　Googleフォントを選ぶ

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

使いたいフォントが決まっていない場合は、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のサーバーに問題が発生した場合や、ユーザーのインターネット接続が不安定な場合、フォントが正しく表示されない可能性があります。

さいごに

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