Snow MonkeyでGoogle Fontsを使う方法

投稿日 2021年1月24日
著者 hiro
カテゴリー Web

ワードプレステーマSnow Monkeyでカスタマイズをしている。

Google Fontsを使ってフォントを変えたいので方法を教えて欲しい。

もしプラグインを使って簡単にできるなら、その方法も知りたい。

こんなことを考えている方へ。

この記事のポイントは以下です。

・Snow MonkeyでGoogle Fontsを使う方法
・プラグインを使用してGoogle Fontsを使う方法（コーディング不要）

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。

Snow MonkeyでGoogle Fontsを使う方法

ワードプレステーマSnow MonkeyでGoogle Fontsを使う手順はこちらです。

My Snow Monkeyをダウンロードする

my-snow-monkey.phpにGoogle Fontsを読み込むコードを追記する

cssでfont-familyを指定する

順番に解説します。

My Snow Monkeyをダウンロードする

まずはMy Snow Monkeyをダウンロードして、一通り設定を終わらせます。

詳しくはこちらをご覧ください。

My Snow Monkeyは、Snow Monkeyカスタマイズ用のプラグインです。

このプラグインのお陰で、わざわざ子テーマを準備する必要なくSnow Monkeyをカスタマイズできます。

my-snow-monkey.phpにGoogle Fontsを読み込むコードを追記する

まずGoogle Fontsのサイトに行きます。

使いたいフォントを選択します。

今回は例として「Noto Sans JP」を使用します。

使用したいウェイト数やスタイルを選択すると、埋め込み用のコードが生成されます。

画像の赤枠部分です。

全体のコードは以下。

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

しかし、使用するのは以下の部分だけです。

https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap

これをどこかに保管しておきます。

続いてmy-snow-monkey.phpを開きます。

ファイルの場所は以下。

wp-content

plugins

my-snow-monkey

my-snow-monkey.php

my-snow-monkey.phpにGoogle Fontsを読み込むコードを追記します。

//Google Fontsを読み込む
function add_google_fonts() {
wp_register_style( 'google-fonts',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap'
);
wp_enqueue_style( 'google-fonts');
}
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

作業にあたり以下の記事を参考にさせていただきました。

【WordPress】「子テーマ」でWEBフォントを使う方法（複数フォント対応）>>

cssでfont-familyを指定する

最後にcssでfont-familyを指定します。

ccsの記述方法は大きく分けて2つあります。

ワードプレスダッシュボード＞外観＞カスタマイズ＞追加 CSS に書く
my-snow-monkeyディレクトリ内にcssファイルを作成し読み込ませる

ひとつ目の方法は、管理画面内のエディタから記載できるので簡単です。

ただ私は後者の方法を使っています。

理由は、追加 CSSに書くとcssが煩雑になるからです。
（毎回カスタマイズの量が多いため）

手順を解説します。

まず、my-snow-monkey.phpにcssを読み込ませる記述を書きます。

//カスタマイズ用のcssを追加
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
			'my-snow-monkey',
			untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/assets/css/style.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( plugin_dir_path( __FILE__ ) )
		);
	}
);

この記述で、

wp-content

plugins

my-snow-monkey

assets

css

style.css

を読みに行かせることができました。

あとは、実際のディレクトリにstyle.cssを配置してfont-familyを記述すればOKです。

なお、cssについては公式にも丁寧な説明があります。

My Snow Monkey に CSS ファイルを配置する
Snow Monkey を CSS でカスタマイズしたい場合、子テーマをつくって子テーマの style.css に CSS を追加するのではなく、カスタマイザーの追加 CSS に CSS を追加することを推奨しています。子テーマをつくる手間がないのでお手軽なのと、実際のページだけでなくエディターにも CSS が反映されるためです。
ただ、CSS の量が多いとどうしても煩雑になってきてしまいます。そういう場合は My Snow Monkey に style.css をつくってみてください。
my-snow-monkey/style.css となるようにファイルを作成した後に、my-snow-monkey.php に下記のコードを追加してみてください。この状態で style.css に CSS を追加すれば、実際のページにもエディターにも CSS が反映されます。

// 実際のページ用の CSS 読み込み
add_action(
　’wp_enqueue_scripts’,
　function() {
　　wp_enqueue_style(
　　　’my-snow-monkey’,
　　　untrailingslashit( plugin_dir_url( FILE ) ) . ‘/style.css’,
　　　[ Framework\Helper::get_main_style_handle() ],
　　　filemtime( plugin_dir_path( FILE ) )
　　);
　}
);
// エディター用の CSS 読み込み
add_action(
　’after_setup_theme’,
　function() {
　　add_editor_style( ‘/../../plugins/my-snow-monkey/style.css’ );
　}
);
【参考記事】Snow Monkey のカスタマイズは子テーマよりプラグインがオススメ！プラグインの雛形をダウンロードできるようにしました>>

プラグインを使用してGoogle Fontsを使う方法

my-snow-monkeyとかcssとかfunctions.phpmとか何か分かんないし面倒臭い

という場合は、プラグインの利用がおすすめです。

Easy Google Fonts

Easy Google Fontsの使い方はこちら。

参考：WordPress（ワードプレス）を勉強するのにおすすめな本

ワードプレスの勉強は確かにネットでもできますが、サイトによって情報や解説の粒度にバラつきがあり体系的に学ぶのが難しいです。

なので、手元に一冊、”WordPress（ワードプレス）のイロハ”がわかる、辞書的な本を置いておくと良いです。現在のワードプレスのバージョンが5.xですので、それに対応した解説書をおすすめします。

特に「WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版]」はおすすめ。静的ページにWordPressを導入する、というテーマで手順をイチから丁寧に解説しています。

案件でよく使うカスタマイズ方法や、セキュリティ対策、有名プラグインの紹介もされており、痒い所に手が届きます。

私も実際にこの本でWordPressを勉強しました。