
このブログでは、結構前からフォントをGoogle Fontsの”Noto Sans”に変更していました。
完全に自己満足の世界ではあるのですが、見やすくなって気に入っていました。
ですが、重いんですね…。
Webフォントの仕組み上、フォントの読み込みが終わるまで文字の表示が遅れます。
このブログを何回も開いていればキャッシュされているので早いのですが、見てくださる大部分の方は一見さんなわけで…。
ということでフォントを変更することにしました。
変更するのはモリサワのWebフォントです。
Webやデザイン業界の人にはお馴染みだとおもいますが、ええ、あのお高いやつです。
それがレンタルサーバーのwpXではなんと無料で使えるようになったんです!
Webフォントなので仕組みは変わらないのですが、レンタルサーバー側が公式に用意しているものですから、最適化されて多少は軽くなっているのではないかと(そんなことはどこにも書いてない)。
見切り発車ですが、気分転換も兼ねて変更することにしました。
一つ注意点として、無料で使えるのは月間PVが2万5千までです。

人気ブログさんなんかはこの時点でアウトだと思いますが、僕は大丈夫なんですね。
ええ、そういうことです…。
ではwpXの管理ページから設定を始めましょう。
メニューからWebフォント設定を選択します。

ここからWebフォントを設定するサイトを追加します。


追加すると上の画像のようにPVが表示され、2万5千のリミットまでどれくらいの余裕があるのかがわかります。
(画像は設定直後なので0です。念のため。)
サイトを追加しましたが、これだけではダメで、jsの追加とcssの変更が必要です。
詳しくはwpXのマニュアルがあるので、そちらを確認して下さい。
まずはjsを読み込むようにします。
これはheader.phpが良いですね。

Google Fontsの方も、もしかしたら元に戻すかもしれないので、コメントアウトしておきました。
続いてcssを変更します。
これはどこのフォントを変更するかで変わりますが、僕は全体を変更したいので、こんな感じに。

以上で設定完了です。
それでは順番に見ていってみましょう。
これが変更前の”Noto Sans”

これがWebフォントを使わないデフォルトのフォント(Mac, Google Chrome)

そしてこちらが今回設定した”新ゴ R”です。

おお、結構変わりましたね。
だからどうしたと言われたら、返す言葉も無いのですが…。
まあ読みやすいに越したことはないです。
というわけでwpXでモリサワのWebフォントを設定する手順でした。
Webフォントが無料で使えるのも良いのですが、WordPressが爆速で動くwpX、オススメです!