SimplicityでモリサワのWebフォントを導入する。

フォントにこだわる。

ブログの見た目を左右するのは、テーマに沿った色使いやCSSによるデザインであるというのは言うまでもないだろう。

しかしさらにこだわるならばフォントへのこだわりは欠かせない。

Webフォントというものをご存知だろうか。

WebフォントはWWWのコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化（レンダリング）をともなうクライアントが文字表示を行うシステムおよびそのフォントである。

Wikipedia より引用。引用者による強調あり。

そう、つまりブログを見てくれる人のPCやスマホのフォント設定をガン無視し、コンテンツを提供する我々が「このブログを見るならこのフォント以外ありえない」とでも言うかのようにこだわりを全面に押し出すことができる、そういう仕組みだ。

実際、フォントが変わるとブログの印象がガラッと変わるのを実感いただけることは断言できる。間違いない。

モリサワフォントの「TypeSquare」をためしてみた。1万PV／月までは無料プランが利用できるので、さっそく登録してUD新丸ゴ Lをサイトの本文に設定完了。Webフォントだから読み込みがちょっと遅延するけど見た目がよいのでよしとする。

— えにかるふぁ (@enic_alpha) 2017年6月20日

ＵＤ新丸ゴＬ、非常に読みやすくてブログの雰囲気が心なしか明るくなった気がして大変満足している。

— えにかるふぁ (@enic_alpha) 2017年6月20日

ここでは、WordPress + Simplicity + TypeSquare の組み合わせでWebフォントを実現する方法を共有する。
※現在はテーマ SANGO を使っている。以下は Simplicity 利用時の記録となる。

TypeSquareとは

TypeSquareは、モリサワフォントの数あるフォント群の中から好きなものを選んで自分のサイトにWebフォントとして設定できるという最高なサービス。

ひとつのフォントの利用であれば、月あたり1万PVまでは無料で利用可能だ。

これから伸び盛りのブロガーには、これはたいへん嬉しい。

スタンダードプラン
簡単にWebフォントをご利用いただけるプランです。
スクリプトタグを挿入し、書体名を指定するだけで、サイト内に必要な文字が自動検知され、クラウド上から閲覧環境に最適なフォントが配信されます。

さらにこのページでは、自分のサイトでWebフォントを適用したらどんな感じに表示できるかお試しすることができる。

TypeSquare導入方法

ここからは導入方法。

1. 会員登録

まずはTypeSquareのサイトから無料の会員登録をしよう。

後から自動でお金を請求される、などということは無いので安心してほしい。

2. header-insert.phpを編集

必要な情報をコピー

登録が完了したらログインして、

プラン・オプション設定 > 確認・編集ボタンと進んでいくと、プラン設定詳細画面にプラン専用タグが現れるのでそれをコピー。

赤枠部分をコピー。
下のボタンで文字の表示方法を選択可能。

WordPressに貼り付け、適用

WordPressの 外観 > テーマの編集 > header-insert.php を選択。

<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>

の下に貼りつける。

3. スタイルシート（style.css）を編集

必要な情報をコピー

先ほどと同じプラン設定詳細画面に自分で選択した書体の一覧領域があるので、そこにあるCSSの指定例をコピー。

例）UD Shin Maru Go Light

WordPressに貼り付け、適用

まず、Simplicity2 child には body{} が無いので親のほうからコピーしてきて子のほうに貼り付けておく。それをこれから子のほうで上書きする。

フォントの指定部分に、TypeSquareからコピーした情報を貼りつける。

「’ ‘（シングルクォート）」で挟んで、「,（カンマ）」を忘れないように。

body {
font-family:
'UD Shin Maru Go Light',
'Hiragino Kaku Gothic ProN',
Meiryo, Helvetica, Arial, sans-serif;
（中略）
}

導入後のポイント

以上でTypeSquareの導入手順は完了だが、確認前に必要になる（かもしれない）手順がある。

変更前のフォントが利用中のブラウザに残っている場合は、フォントがすぐに反映されて見えないことがある。その場合はブラウザでキャッシュを削除することで解決する。

忘れがちなことなのでポイントとして記載しておく。

ブログに設定したWebフォントが反映されぬ・・・と思っていたらキャッシュを消すのを忘れてた。いつもやっちゃうんだよなあ、キャッシュ消してなかった問題。

— えにかるふぁ (@enic_alpha) 2017年6月20日

おわりに

WordPress + Simplicity + TypeSquare の組み合わせでWebフォントを実現する方法を紹介した。

お役に立てたなら幸いだ。ぜひ知り合いに共有して教えてあげてほしい。