WordPressにGoogle Fontを読み込ませたい

テーマLightningでは使用できるGoogle Fontが少ない

私はテーマLightningでサイト制作を行うことが多いのですが、Lightningでは使用できるGoogle Fontが限られていて、特にLoghtning無料版で使用できるGoogle Font(日本語)はNoto Sans JPだけです。

Lightning(無料版)で使用できるフォント

サイト制作の経験を積むにつれ、フォントの重要性を感じ始めたころ、どうしても別のGoogle Fontを使用したくて、調べた時のメモを本記事に残します。

Lightningのデフォルトのh2フォント

デフォルトのh2のフォント

WordPressにGoogle Fontを読み込む方法

Step1.使いたいGoogle Fontを選ぶ

1-1

Google Fontにアクセスし、フォントを選ぶ。今回は例としてNoto Serif JPを選びます。

google fontsサイト画面

1-2

google fontsサイト画面

1-3

google fontsサイト画面

1-4

1-5

Step2.WordPressに読み込む設定を行う

2-1

Lightning子テーマのfunctions.phpを編集する。

一般的にフォントは<head>内に読み込みますが、Lightningは</body>の前で読み込んでいますので、今回も</body>の前で読み込むように設定します。

下記コードをfunctions.phpに記載します。

function my_google_fonts(){
    echo 'ここにGoogle Fontsサイトでコピーした<link>タグを貼り付ける';
}
add_action('wp_footer', 'my_google_fonts', 1);

Step3.CSSでfont-familyを指定する

3-1

今回は<h2>タグを変更するので以下のようにCSSを記載

h2 {
font-family: "Noto Serif JP", serif;
font-weight: 700;
}

Noto Serif JPに変更後のh2

フォントが変更されました!