【WordPress】海外テンプレ向け日本語Google fonts導入手順

サイト運営

2019.02.052021.11.15

日本語のGoogle fontsが正式版としてリリースされました。この記事では、日本語のGoogle fontsを海外テンプレートで使用する手順について紹介します。

この記事で分かること

海外Wordpressテーマの弱点
日本語のGoogle fonts導入手順
1. Google fontsを通常の方法で読み込む場合（レンダリングのブロックが発生する）
2. Google fontsを非同期で読み込む場合（レンダリングのブロックは発生しない）
Noto-Serif-jpが文字化けした時の対策方法
まとめ

海外Wordpressテーマの弱点

最近のWordpressテンプレートだとWeb fontの対応も当たり前で、CocoonやLuxeritasなどの無料テンプレートでも日本語のGoogle fontsは対応済みです。

しかし、海外製のWordpressテンプレートの場合は話が別です。

海外製の有料テーマもWeb fontとしてGoogle fontsに対応していることがほとんどですが、選べるfontの中に日本語fontが含まれていないことが多いです（対応してないのが普通）。

私は海外テーマの使用を以下の記事で推奨しています。

【2022年】Wordpress有料海外テーマの本当のおススメは？

Wordpressのテーマは国内製よりも海外製の方が、コスト、機能ともに優れてます。これは断言します。日本のWordpressテーマは未だにWidgetですべてやるタイプが多いですが、海外製のテーマだと、Visual Composerが同梱...

せっかくの海外テーマで日本語のGoogle fontsを使えないのは不便なので、Google fontsの日本語フォント導入手順を調べました。

日本語のGoogle fonts導入手順

日本語のGoogle fontsの導入手順は大きく3段階でOKです。

Google fontsを通常の方法で読み込む場合（レンダリングのブロックが発生する）

Google fontsで使いたいfontを探す
headセクション内でGoogle fontsを読み込む
CSSでfont-familyを指定

Google fontsを非同期で読み込む場合（レンダリングのブロックは発生しない）

Google fontsで使いたいfontを探す
フォントの非同期読み込みを有効化（javascript）
CSSでfont-familyを指定

Google fontsを通常の方法で読み込む場合（レンダリングのブロックが発生する）

Google fontで使いたいfontを探す

Google fontsのサイトは以下になります。

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

Google fontsにアクセスすると日本語以外のフォントが表示されるので、まずは日本語フォントに絞り込む必要があります。

日本語のフォントを探す場合は、右のLanguagesを『Japanese』にすれば日本語フォントだけ表示されます。

現在、12種類表示されますが、SCとかTCとか最後についてるやつは中国語（簡体字中国語 SC/繁体字中国語 TC）なので、実質8種類だとおもいます。

Noto Sans JP（ゴシック体）
Noto Serif JP（明朝体）
M PLUS 1p（ゴシック体）
M PLUS Rounded 1c（丸ゴシック体）
さわらび明朝
さわらびゴシック
Kosugi Maru（丸ゴシック体）
Kosugi（ゴシック体）

日本語フォントとして、人気があるNoto Sans JPを選ぶ場合で説明します。

まず、Noto Sans JPの＋をクリックします。クリックするだけでこんな感じで表示されます。

CUSTOMIZEをクリックして、ロードするフォントの条件を指定します。

初期状態だとregular 400とLatinだけになっています。

LanguagesにJapaneseを追加します。

埋め込みコードの画面に戻ると、コードが変更になって『subset=japanese』が追加されています。

headセクション内でGoogle fontsを読み込む

Google fontsを使用するには、headセクション内でfontを読み込む必要があります。

読み込むための記述は、Google fontsでフォントを選択した時に表示されていた記述です。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&subset=japanese" rel="stylesheet">

Google fontsを使用するには、この記述を使用しているテーマのheadセクションに追加して読み込まなければなりません。

headセクションにユーザーが記述を追加する場合、使用しているテーマによって方法が違います。

もし、テーマ側でheadセクションのカスタマイズを提供していない場合は、直接テーマファイルをいじるのではなく、子テーマを用意して子テーマのfunction.phpに記述を追加するのが簡単です。

function.phpに記述する方法

function custom_script_name(){
?>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&subset=japanese" rel="stylesheet">
<?php
}
add_action('wp_head', 'custom_script_name');

CSSでfont-familyを指定

子テーマのCSSで、Google fontsを使用する要素にfont-familyで指定します。

フォントの指定はwindowsやmac、iOSやAndroidでいろいろ違うのでややこしいのですが。

自分の場合は、web fontは最後の手段なので基本端末が持っているフォントを使うんだけどwindowsがアレなので、そこはweb fontでというスタンスです。

font-familyの指定方法についてはサルワカさんのfont-familyメーカーの説明が詳しくてわかりやすいです。

Font-familyメーカー：フォント種類一覧からサクッと指定

Windows・Mac・iOSの標準フォント一覧からドラッグするだけで簡単にfont-familyを作成できます。

bodyというのは例です。

body {font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Noto Serif JP',serif;}

Google fontsを非同期で読み込む場合（レンダリングのブロックは発生しない）

Google fontで使いたいfontを探す

非同期で読み込まない場合と同じです。

CSSでfont-familyを指定

非同期で読み込まない場合と同じです。

フォントの非同期読み込みを有効化（javascript）

ユーザーが用意したjavascriptを読み込めるのであれば、フォントの遅延読み込みを有効にするのがよいです。

javascript内でGoogle fonts名を指定する（この例だとRoboto）ので、<head>内でGoogle fontsを読み込む必要ありません。javascriptのfamilies:[ここにGoogle fonts名]を書くとGoogle fontsを読み込んでくれます。

window.WebFontConfig = {
google: { families: ['Roboto'] },
active: function() {
sessionStorage.fonts = true;
}
};

(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

Web Font Loader で Google Fonts を非同期で読み込みサイト速度を改善 - FirstLayout

サイト表示速度を遅くせず Google Fonts を利用できる Web Font Loader の使い方の説明です。テキストがちらつく FOUT を抑えることもできます。

Web Font Loader は、フォントイベントに対応したクラス名を <html> タグに追加します。
CSS で主に利用する追加されるクラス名は、下記のとおりです。
.wf-loading：フォントを読み込み中の時
.wf-active：フォントの読み込みが完了した時
.wf-inactive：フォントの読み込みに失敗、またはブラウザが Web フォントに対応していない時

とありますので、遅延読み込みのjavascriptが正常に動いていれば、<html>タグにwf-activeというクラスが追加されているはずです。なお、<html>タグというのはページの先頭付近に1か所だけあるやつです。

もし、wf-activeが見つからない場合は、<link>タグで通常の読み込みが残っている可能性があります。

javascriptを読み込むためのfunction.php記述

子テーマに./jsというディレクトリを掘って、my_custom.jsというファイルを用意しておきます。そのjsファイルに読み込みたいjavascriptを書いておきます。

// Register and enqueue scripts
function my_custom_scripts() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/my_custom.js',
array( 'jquery' )
);
}

add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );