海外テンプレートで日本語のGoogle fontsを導入する手順

2月 18, 2019サイト運営Google, Web, Wordpress, Wordpressテーマ

日本語のGoogle fontsが正式版としてリリースされました。

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

問題となるのは海外製のWordpressテンプレートの場合です。

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

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

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

日本語のGoogle fonts導入手順

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

  1. Google fontsで使いたいfontを探す
  2. headセクション内でGoogle fontsを読み込む
  3. フォントの非同期読み込みを有効化(javascript)
  4. CSSでfont-familyを指定

Google fontで使いたいfontを探す

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

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

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

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

  1. Noto Sans JP(ゴシック体)
  2. Noto Serif JP(明朝体)
  3. M PLUS 1p(ゴシック体)
  4. M PLUS Rounded 1c(丸ゴシック体)
  5. さわらび明朝
  6. さわらびゴシック
  7. Kosugi Maru(丸ゴシック体)
  8. Kosugi(ゴシック体)

 

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

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

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

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

LanguagesにJapaneseを追加します。

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

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

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

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

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&amp;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&amp;subset=japanese" rel="stylesheet">
<?php
}
add_action('wp_head', 'custom_script_name');

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

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

javascript内でGoogle fonts名を指定する(この例だとRoboto)ので、ちょこちょこ変更すると変更し忘れが起きやすいです。

フォント名の指定が間違っていてもheadセクションの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 は、フォントイベントに対応したクラス名を <html> タグに追加します。

CSS で主に利用する追加されるクラス名は、下記のとおりです。

  • .wf-loading:フォントを読み込み中の時
  • .wf-active:フォントの読み込みが完了した時
  • .wf-inactive:フォントの読み込みに失敗、またはブラウザが Web フォントに対応していない時

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

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' );

Autooptimizeで同じことができそう

Autooptimizeの設定を見ていたら、Google fontsの読み込みに関する設定がありました。

そこにwebfont.jsを使うという選択肢がありました。

Autooptimizeを既に導入しているのであれば、webfonts.jsの導入はすごい簡単ということです。

CSSでfont-familyを指定

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

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

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

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

bodyというのは例です。

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

まとめ

最近はいろんな便利なカスタマイズもネットで調べればすぐに出てきます。修正そのものもコピペで済むケースが多く、カスタマイズのハードルは下がってきていると思います。

しかし、何事もそうですが修正とその確認はワンセットです。確認ができないような修正というのは必ず不具合が起きます。様々なカスタマイズを行うのは自由ですが、自分が考えているように内部状態や動作が変わっているのか逐一確認しておかないと、後々問題が起きますのでご注意ください。

海外テーマの導入を考えているのであれば、以下の記事をお勧めします。