【Google Fonts】Google FontsをWordPressで使ってみる（試行記録）

1　Google Fontsとは？

本記事は、WordPressで Google Fontsを 利用するためのわたしの試行記録です。
現在、わたしは視認性の良いと思われるフォントを探している最中です。
読者の皆様方には、あまり役に立てられない記事かと思いますが、
わたしの試行記録として残しておきます。

Google Fontsとは、Googleが提供するWebフォントサービスです。

日本語や英語を含むさまざまなフォントを無料で使用することができ、
商用利用も可能なため、多くのサービスで広く活用されています。

2024年9月時点で、1,700種類以上のフォントが提供されており、
その中には60種類以上の日本語フォントも含まれています。

豊富なフォントが揃っているだけでなく、言語や種類ごとに絞り込み検索が可能で、
実際に使用したい文字を入力してプレビューで確認することもできるため、
簡単にお気に入りのフォントを見つけることができます。

WordPressでGoogle Fontsを利用するには、下に示す4つの方法があるかと思います。

① テーマのカスタマイザーを使う
② プラグインを使用する
③ テーマの“functions.php”にコードを追加
④ ビジュアルエディタで直接追加

本記事は、これらの方法を試したことを記録しておきました。

2　Google FontsをWordPressで使ってみる

2.1　HTMLへ コードを追加

WordPressでのGoogle Fonts利用記述は、テーマによって多少異なっています。

Google Fonts利用のコード基本形は、HTMLでの記述です。
HTMLでの記述方がわかれば、WordPressでの利用も理解しやすいのではと思います。
まずは、HTMLの記述方から。

１. Google Fontsにアクセス
まず、Google Fonts にアクセスします。

２. 日本語フォントを選択
言語フィルターを使用して「日本語」を選択します。
利用したいフォントを見つけたら、それをクリックします。

３. フォントを選択
フォントの詳細ページで、使用したいスタイル（太さやスタイル）を選択します。
画面右側に「選択したフォント」が表示されます。

４. 埋め込みコードをコピー
右側のパネルで「@import」または「リンク」タブを選びます。
提供されたコードをコピーします。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
rel="stylesheet">

５. HTMLに追加
コピーしたコードをHTMLの<head>セクションに貼り付けます。

６. フォントを適用
CSSでfont-familyプロパティを使用して、選択したフォントを適用します。

2.2　WordPressで利用する

2.2.1　テーマのカスタマイザーを使う

テーマによっては、CSSの追加はできても、“<head>”にコードを追加できないものがあります。

わたしがメインを利用しているテーマは、フォント設定のセクションはありませんでした。
残念ながら、この方法は使えませんでした。

# 2020年製で、サポートもなくなったから更新時かな？

１. WordPress管理画面にログインし、《外観⇒カスタマイズ》を選択します。

２. 追加CSSまたはフォント設定のセクションを探します（テーマによって異なります）。

３. Google Fontsのリンクを追加します。

例えば、

【HTML】
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
rel="stylesheet">

【追加CSS】
<style>
body {
font-family: 'Noto Sans JP', sans-serif;
}
</style>

2.2.2　プラグインを使用する

2025年05月01日現在、私の希望に合う使いやすいと思うプラグインは、
見つかっていませんが、こういう方法があるのだということで挙げさせていただきました。

１. WordPress管理画面にログインし、《プラグイン⇒新規追加》を選択します。

２. 「Google Fonts」や「Easy Google Fonts」などのプラグインを検索し、
インストールします。

３. プラグインを有効化します。

４. プラグインの設定メニューから、使用したいフォントを選択し、適用します。

2.2.3　テーマのfunctions.phpにコードを追加

この方法は、WordPressサイト全体に影響します。
テーマの更新が行われた場合、 再度“functions.php”ファイルを編集し直さなければならなくて面倒ですので、
基本的にはやりたくない方法です。

１. WordPress管理画面にログインし《外観⇒テーマエディター》を選択します。

２. “functions.php”ファイルを開き、以下に示すコードを追加します。

function my_custom_fonts() {
wp_enqueue_style('google-fonts',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap' , false);
}
add_action('wp_enqueue_scripts', 'my_custom_fonts');

2.2.4　ビジュアルエディタで直接追加

投稿、またはページの編集画面で、Google Fontsへのリンクを追加する方法です。
記事毎に異なるフォントを使えて良いのですが、
テーマによっては、CSSの追加はできても、“<head>”に追加できないものがあります。

実際の使用例を下に示します。

Google Fonts 日本語フォントの使用例（ZEN紅道）
Google Fonts 日本語フォントの使用例（ニコモジ）
Google Fonts 日本語フォントの使用例（ニクキュウ）

以上

本文中の記述に、
誤字や脱字、誤った内容の記述など見つかりましたら、
下に示すフォームでご連絡いただければ幸いです。

お問い合わせ