ZEROのメモ

システム手帳とブログのコラボ

【9999】WordPressで「Google フォント」を functions.php で呼び込む方法

WordPress の利用を決めると、最初に適用する「テーマ」を決定すると思いますが、個人的に「良いな~」と感じる「テーマ」の多くは海外製!そして、日本語フォントをサポートしていない・・・フォントの設定は、変更してしまえばそれまでなのですが、それでも「最適なフォント」ってのを設定したい。

本ブログでも正にフォントに関しては再設定が必要と感じていましたが、何が良いのか!?どうやって設定するのがベストなのか!?そんなことを考え出すと、色々と試行錯誤を繰り返すばかりで・・・

そこで、本ブログでは、かなりの時間を掛けて、トライ・アンド・エラーを繰り返して、以下のような設定を実施しましたが、最適なのかどうかは不明です。ただ、かなり穂人的には満足のいく結果になっています。

style css における font-family を決める

何はともあれ、style.css における font-family を決める必要があります。単純に好きなフォントを指定すればいいのでしょうけど、自分の経験からブラウザーによって見え方が違うので、フォーマットが崩れてしまっていることがあるので、可能な限りそうした問題を払拭しておきたい。

ネットを検索して、辿り着いた結論が以下の通りです。

Google フォントは Web フォントを提供しているサービスです。

フォントは通常、ローカル環境に存在するフォントを使用する仕組みになっていますが、Web フォントを使用するとサーバーからフォントを読み込んで様々なブラウザで表示することが出来ます。出典:「【2017年版】これで間違いなし!font-familyのおすすめ設定」より

なるほど!もうこれっきゃないでしょ、ってことで、上記の投稿記事にある「Google フォント」を利用することにして、もうそのまんま推奨の「font-family」をコピペで適用です。

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
 font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

簡単、簡単!素晴らしい投稿記事があるんですよね~ネットには!ただ、ちょっと上記のコードで気になるところがあります。「@import」ってやつです。「WordPress」では、「@import」を利用して style.css を記述すること推奨していないわけです・・ functions.php へ移動する・・・

それじゃ、functions.php で「Google フォント」を呼び込むようにすれば良い。ところが、これが大変難しかった!素人が、簡単なんて考えないことですね。試行錯誤して以下の手順で解決しましたが、正しいかどうかは不明です。

Google フォント「Lato」を functions.php で読み込む

先ずは、Google フォントである「Lato」ってやつを functions.php で呼び込みます。このフォントに関しては、functions.php での呼び込みに関しては、直ぐに参考になる投稿記事が見つかりました。公開記事「GoogleのWebフォントをWordPressテーマで使う方法 – ネット集客の武器屋 While Creation」が素晴らしい!ほとんどコピペで利用することができます。

私の場合は、上記のリンク先の記事をベースに下記のようなコードを functions.php へ挿入しました。

/*-------------------------------------------------------------------------
Googleフォント(Lato)を @import を利用せずに読み込む
参考サイト:http://while-creation.com/google-webfont-wptheme/
------------------------------------------------------------------------*/
function my_scripts() {
    wp_enqueue_style( 'google-webfont-style', '//fonts.googleapis.com/css?family=Lato:400,700' );
}

最後の行にある「family=xxx」を「family=Lato:400,700」と書き換えるだけです。前出の公開記事「【2017年版】これで間違いなし!font-familyのおすすめ設定」において、「Lato」に関しては説明がありますから、そちらを参照されれば簡単に理解できると思います。

Google フォント「Noto Sans JP」を functions.php で読み込む

これが・・・実はとっても大変でした!上記の「Lato」の読み込みを参照に最終行の「family」だけを書き換えて、コートを追加しても機能しない・・・どころかエラーになって、ブログの表示さえしなくなってしまう!

ネット上を探しに探して、辿り着いたのが「WEBサイトのベースフォントをNoto Sans Japaneseに変更する手順 – Raindrops 取扱説明書」という公開記事。特定のテーマ向けの解説ですから、本ブログで機能するのかとっても懐疑的でしたが、とにかく情報がないので、とりあえず導入!すると!!機能しました!!!

ということで、以下のコードを functions.php へ挿入。

/*---------------------------------------
Googleフォント(noto sans JP)を @import を利用せずに読み込む
参考サイト:http://www.tenman.info/wp3/manualraindrops/archives/1360
-----------------------------------------*/
add_action( 'wp_enqueue_scripts', 'my_scripts' );
add_action( 'wp_enqueue_scripts', 'labo_add_dashicon' );
function labo_add_dashicon(){
	if( get_locale() == 'ja' ) {
		$stylesheet_url = '//fonts.googleapis.com/earlyaccess/notosansjp.css';
		wp_register_style( 'noto-sans-ja-site', $stylesheet_url, array(), '2015-1-21' );
		wp_enqueue_style( 'noto-sans-ja-site' );
	}
}

コードに関する解釈は・・・全く不明です。単純にコピペして functions.php へコードを挿入したら機能している、といった感じです。

まとめ(style.css と functions.php)

上記から、最終的に本ブログでは style.css と functions.php を以下のようにしてフォントを設定しました。理解しての採用ではありませんが、先ずは「はじめの一歩」としては十分かな~

Google フォントを呼び込むための functions.php

もうちょっと効率の良い行数が少ない・・・)コードがあるような気がしますが・・・理解できてないので、現段階では機能することを最優先して、以下のコードを挿入しています。

/*---------------------------------------
Googleフォント(Lato)を @import を利用せずに読み込む
参考サイト:http://while-creation.com/google-webfont-wptheme/
-----------------------------------------*/
function my_scripts() {
    wp_enqueue_style( 'google-webfont-style', '//fonts.googleapis.com/css?family=Lato:400,700' );
}
/*---------------------------------------
Googleフォント(noto sans japanese)を @import を利用せずに読み込む
参考サイト:http://www.tenman.info/wp3/manualraindrops/archives/1360
-----------------------------------------*/
add_action( 'wp_enqueue_scripts', 'my_scripts' );
add_action( 'wp_enqueue_scripts', 'labo_add_dashicon' );
function labo_add_dashicon(){
	if( get_locale() == 'ja' ) {
		$stylesheet_url = '//fonts.googleapis.com/earlyaccess/notosansjp.css';
		wp_register_style( 'noto-sans-ja-site', $stylesheet_url, array() );
		wp_enqueue_style( 'noto-sans-ja-site' );
	}
}

Google フォントを設定するための style.css

Google フォントを functions.php で呼び込んだだけでは機能しませんよね!当然ですが、style.css にフォントを定義する必要があります。本ブログでは、以下のコードを「font-family」として定義しました。

body {
font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
 }

もうちょっと研究が必要ですが、先ずはスタートとしては良い感じです。

補足:テーマ「Frontier」では「Options」で設定

何とも皮肉なことに。膨大な時間を費やして上記のような結論に達したのですが、本ブログで利用している「Frontier」というテーマには、「Misc」というセクションがあって、オリジナルのヘッダーを挿入することができます!よって、上記の苦労は以下の 2 行で解決出来ちゃいます。

<link rel='stylesheet' id='google-webfont-style-css'  href='//fonts.googleapis.com/css?family=Lato%3A400%2C700' type='text/css' media='all' />
<link rel='stylesheet' id='noto-sans-ja-site-css'  href='//fonts.googleapis.com/earlyaccess/notosansjp.css' type='text/css' media='all' />

いや~参った!

気楽にコメントして頂けますように!コメントは承認後の公開です。

Zeroのメモ © 2017 by Zero Cool. All Rights Reserved. Frontier Theme