ブログのフォントをモリサワのWebフォントに変更しました@wpX

4548845462 c065b00a74 o

このブログでは、結構前からフォントをGoogle Fontsの”Noto Sans”に変更していました。

完全に自己満足の世界ではあるのですが、見やすくなって気に入っていました。

ですが、重いんですね…。

Webフォントの仕組み上、フォントの読み込みが終わるまで文字の表示が遅れます。

このブログを何回も開いていればキャッシュされているので早いのですが、見てくださる大部分の方は一見さんなわけで…。

ということでフォントを変更することにしました。

 

変更するのはモリサワのWebフォントです。

Webやデザイン業界の人にはお馴染みだとおもいますが、ええ、あのお高いやつです。

それがレンタルサーバーのwpXではなんと無料で使えるようになったんです!

Webフォントなので仕組みは変わらないのですが、レンタルサーバー側が公式に用意しているものですから、最適化されて多少は軽くなっているのではないかと(そんなことはどこにも書いてない)。

見切り発車ですが、気分転換も兼ねて変更することにしました。

 

一つ注意点として、無料で使えるのは月間PVが2万5千までです。

スクリーンショット 2017 08 19 22 25 50

人気ブログさんなんかはこの時点でアウトだと思いますが、僕は大丈夫なんですね。

ええ、そういうことです…。

ではwpXの管理ページから設定を始めましょう。

メニューからWebフォント設定を選択します。

スクリーンショット 2017 08 19 22 24 27

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

スクリーンショット 2017 08 19 22 26 43

 

スクリーンショット 2017 08 19 22 26 59

追加すると上の画像のようにPVが表示され、2万5千のリミットまでどれくらいの余裕があるのかがわかります。

(画像は設定直後なので0です。念のため。)

 

 

サイトを追加しましたが、これだけではダメで、jsの追加とcssの変更が必要です。

詳しくはwpXのマニュアルがあるので、そちらを確認して下さい。

まずはjsを読み込むようにします。

これはheader.phpが良いですね。

スクリーンショット 2017 08 19 22 27 56

Google Fontsの方も、もしかしたら元に戻すかもしれないので、コメントアウトしておきました。

 

続いてcssを変更します。

これはどこのフォントを変更するかで変わりますが、僕は全体を変更したいので、こんな感じに。

スクリーンショット 2017 08 19 22 36 21

 

以上で設定完了です。

それでは順番に見ていってみましょう。

 

これが変更前の”Noto Sans”

スクリーンショット 2017 08 19 22 23 06

 

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

スクリーンショット 2017 08 19 22 23 52

 

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

スクリーンショット 2017 08 19 22 34 57

おお、結構変わりましたね。

だからどうしたと言われたら、返す言葉も無いのですが…。

まあ読みやすいに越したことはないです。

 

というわけでwpXでモリサワのWebフォントを設定する手順でした。

Webフォントが無料で使えるのも良いのですが、WordPressが爆速で動くwpX、オススメです!

 

photo credit: flakeparadigm Still Life (35mm) – Typewriter via photopin (license)