手書き文字風日本語フリーフォントでブログをデザインしてCSSを非同期で高速に読み込む

この記事は約7分で読めます。

WordPressカスタマイズ

By: norio takahashi

メイリオなどデフォルトのフォントは読みやすいけど単調。
特にテーマが被ると、少々のカスタマイズでは被って見えます。
ちょっと変化をつけてみたかったので手書き文字風フォントを採り入れてみました。

……しかし、

「サイトが重くなる」という大問題が!

でも、色々対処した結果、なんとか従前と体感変わらないくらいで導入することができました
その方法を以下に紹介します。

手書き文字風フリーフォントを選ぶ

実は、本サイトのテーマカラーは「黒板」を意識しています。
ここに手書き文字を合わせたらチョークで書いたっぽくていいかなあと。
というわけで手書きに見えるフォントを探しました。

ふい字フォント

たぬき油性ゴシック

殴り書きクレヨン

いずれも商用利用可で無料です。
比べた結果、私はふい字フォントにしました。
たぬき油性ゴシックとは好みで決めればいいのではないかと。

殴り書きクレヨンはタイトルなどでピンポイントに使うとかなりいい感じ。
私はふい字フォントのサインペンっぽさが気に入って統一しましたが、チョーク感は殴り書きクレヨンの方が出ます。

完成見本

トップページはこんな感じ。

かなり柔らかい雰囲気になったのではないかと思っています。

以下、作成編と設置編の二つのパートにわけて説明します。

作成編

大雑把には、フォントをWEBフォント化して定義します。
しかしそのまま使うと重いです。
そのため、使う文字だけに絞り込み軽量化します(サブセット化)。

1 使う文字を絞り込む

始めにサイトデザインから決める

まず通常のフォントで文章含むブログサイトのデザインを施してから、どこに使うかを決めます。

これはフォントファイルを軽量化するため。

他サイト様でサブセット化について説明しているものの多くはブログ全体に適用することが前提となったもの。
そのため第一水準漢字まででファイルを作る形で説明していますが、これでもかなりサイズが大きいです。
実際に試してみるとわかりますが、かなり重いです。

もし、本文内の見出しなどにも使うなら、第一水準漢字まで入れる方法で構わないと思います。
適用する文章が、その度変わるので。

私の適用した箇所 ~あまり変更しない箇所のみに絞るのがベスト

ただ私は、あまり文章を変えないところのみに適用することを推奨します。
私の変更した箇所は、

  • タイトル
  • サイト説明
  • グローバルナビ
  • サイドバーH4見出し
  • トップページH2見出し(「私の小説~拡散お願いします」の部分です、固定ページ利用)

サイトが重くなるとgoogleからの評価が落ちますし、訪問者の利便性も落ちますので。

2 サブセット化

サブセットフォントメーカーというソフトを利用します。
下記リンクからダウンロードしてインストールしてください。

起動します。
画像の通り入力してください。

使う文字はサイトからコピペするのが早いと思います。

作成開始を押すとファイルができあがり、WOFFコンバータが起動します。

チェックを確認して「変換開始」を押すとフォントファイルのできあがりです。

3 ファイルアップロード

できあがったファイル4つ(ttf、woff、woff2、eot)をアップロードします。
子テーマを使っていれば「fonts」フォルダを作ってアップロードするのが管理しやすいと思います。

導入編

フォントを読み込んで設定します。
ここでよく紹介されているのがstyle.cssに直接@font-faceで定義づけるもの(あるいはそう読めるもの)

しかし、これは愚策です。

やってみればわかりますが、いかにファイルを軽くしていようとサイトが重くなります。
私はここでドハマリしました。
解決法は、

cssファイルを別個に作り、スクリプトで読み込ませて非同期化する。
以下、その方法を説明します。

1 新しいcssファイルを作る

名前は何でもいいのですが、ここではhuimin.cssとでもしておきます。
(以下、huiminと書かれた部分は、コード内の記述も含めて、好きに変えて下さい)
huimin.cssの中身に、次の記述をします。

@font-face {
 font-family: "huimin";
 src: url('./fonts/huimin.eot');
 src: url('./fonts/huimin.woff') format('woff'),
 url('./fonts/huimin.ttf') format('truetype');
 url('./fonts/huimin.woff2') format('woff2');
}

フォントファイルを子テーマのfonsフォルダに入れた例です。
保存して、子テーマフォルダ直下にアップロードします。

2 スクリプトファイルを作る

Luxeritasるな様の記事を参考にしました。

やり方其の1、其の2どちらでも動きますが、私の環境において体感早く感じられた前者を採用しています。

テーマがLuxeritas以外

huimin.jsというファイルを作成し、次のコードを記述します。

(function(){
 var n = document.createElement('link');
 n.async = true;
 n.defer = true;
 n.type = 'text/css';
 n.rel = 'stylesheet';
 n.href = 'https://【ドメイン名】/wp-content/themes/【子テーマフォルダ名】/huimin.css';
 var s = document.getElementsByTagName('script');
 var c = s[s.length - 1];
 c.parentNode.insertBefore(n, c);
})(document);

終わったら子テーマフォルダにアップし、ヘッダー終わりかフッターでjsファイルを読み込ませます。

テーマがLuxeritasの場合

子テーマの「luxech.js」に先のコードを記述します。
これでテーマ側で自動的に読み込み・圧縮・結合してくれます。

うまく動かない場合はLuxeritasカスタマイズの次の項目をチェックしてみたください。

  • 「javascript」の「子テーマの Javascript ( luxech.js ) を読み込まない」にチェックが入ってないか
  • 圧縮・最適化の子テーマのjsが「圧縮する」になっているか。

3 style.cssでフォントを適用する

ここは人によって違いますが、私の例を挙げておきます。
テーマがLuxeritasの場合はそのまま流用できます。

/************************************
** フォント変更
************************************/
/*サイトタイトル */
.sitename {
 font-family: 'huimin' ;
}
/*サイト説明 */
#head-in .desc{
 font-family: 'huimin' ;
}
/*サイドバー */
#side h4{
font-family: 'huimin' ;
}
/*グローバルナビ */
#gnavi{
 font-family: 'huimin' ;
}

huiminのところは、先のhuimin.cssで指定した名前です。

@font-face {
 font-family: "huimin";
}

反映されなければ「!important」をつけてみてください。
またキャッシュ消去なども試してみてください。

まとめ

解答者の写真
この方法であれば、導入前と比較してもさほど変わらない体感で記事の閲覧ができるわ。
もちろんPageSpeedInsightsでも怒られない。
「外部フォント導入は重いから嫌!」と考えていた人にとっては敷居が下がると思う。
サイト速度はgoogleからも評価される項目。
ただフォントを導入するのではなく、サイト速度も考慮して導入しようね。