こんにちは、ゆんつです。
僕がブログを作るのに使っているエックスサーバーではあるサービスがあります。
それは月間のアクセス数が7.5万PVまでならモリサワという老舗フォントメーカーの33種類のWEBフォントを無料で利用することが出来るサービスです。
通常WEBサイトを閲覧しているときは、閲覧に利用しているデバイスに搭載されているフォントのうちWEBサイトが指定したものと適合するフォントが表示されます。
ですので、同じWEBサイトを閲覧していても、そのデバイスによっては適用される文字のフォントが違う場合があり、ブログの見た目が変わってくる場合があるのです。
一方WEBフォントはフォントをデバイスに依存せず外部から読み込むため、どのようなデバイスからWEBサイトを閲覧してもフォントが同じなので見た目に統一感が出るようになります。
実は僕のブログでは既に1か所だけWEBフォントを使っています。
それはブログのタイトル部分です。
この部分だけWEBフォントであるGoogleフォントのKosugi Maruというのを使っているのです。
ただし残りの部分（本文など）にはWEBフォントは使っていません。
僕のブログは7.5万PVも無いですし、せっかく無料で使えるので、今日はエックスサーバーの無料サービスであるモリサワフォントを使ってみたいと思います。
ちなみにモリサワフォント導入前のbody要素のfont-familyは
游ゴシック体, "Yu Gothic", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif
となっております。
利用できるフォント一覧
以下のリンク先に無料で利用できる33種類のフォント一覧があります。
7.5万pvを超えたらどうなる？
エックスサーバーのマニュアルには
"月間7.5万PVを超える場合、Webフォントの適用は外れますが、ブラウザ標準でのフォント表示に戻る為、表示内容に影響はありません。"
となっており、7.5万PVを超えてしまってフォントが何も表示されなくなるといったような心配はありません。
導入方法
まずエックスサーバーのサーバーパネルにログインします。
そして「Webフォント設定」をクリック。
Webフォントを導入するドメインを選択。
ドメインを選択すると「Webフォント設定」という画面になるので、「Webフォント設定の追加」タブをクリックし、適用するサイトを選択し「設定する」をクリック。
これでサーバー側のWebフォントの設定は完了です。
この設定が完了すると、設定前にWEBフォント設定画面では何も表示されていなかったPV欄にカウント用の数字が入り、設定を削除するボタンが現れます。
設定前
設定後
以上でサーバーパネルでの設定は完了です。
続いてWordPressの管理画面にログインし、「プラグイン」 → 「新規追加」をクリック。
検索欄に「TypeSquare Webfonts for エックスサーバー」と入力してプラグインを検索し、インストールした後に有効化します。
有効化すると左側の一覧にTypeSquare Webfontsと言う項目が増えますのでクリックします。
セレクトボックスからフォントテーマ選んで設定します。
フォントテーマは33種類のモリサワフォントのなかで、どのWebフォントを適用するかを決めるものです。
僕は「新ゴ B」と「新ゴ R」を使いたいので「ベーシック」を選択して「フォントテーマを更新する」をクリック。
既定のテーマではWebフォントを適用する部分をざっくりとしか決めることしか出来ませんが、テーマの選択で「新しくテーマを作成する」を選択すれば、タイトルやリード、本文などに分けて適用したいフォントを自分で好きなように設定できます。
また上級者向けのカスタマイズを開けば、もっと細かくクラスを指定してフォントを適用したり、記事ごとにテーマを設定することもできます。
モリサワフォント適用後の見た目の変化
モリサワフォント適用前と適用後を見てみましょう。
適用前：Yu Gothic
適用後：新ゴ
文字の見た目が全然違いますね。
くっきりと力強くなったきがします
モリサワフォントを止めたい時
WordPressのモリサワフォントを止めたい時は、管理画面で「プラグイン」→「インストール済みプラグイン」をクリックし、プラグイン一覧から「TypeSquare Webfonts for エックスサーバー」を探して「停止」をクリックしプラグインを停止します。
そしてエックスサーバーのサーバーパネルにログインし、Webフォント設定しているドメインを選択し「削除する」をクリック。
これにより設定していたモリサワのWEBフォントの設定は削除されます。
そして元々設定していたfont-familyで表示されるようになります。
表示速度の変化
PageSpeed Insightsを利用してモリサワフォント導入前と導入後の表示速度を測定しておきました。
| PC | モバイル | |
|---|---|---|
| 導入前 | 96 | 76 |
| 導入後 | 97 | 65 |
モバイルが10点以上落ちた！！
うーん・・・
これはまずいな・・・
2日にわたり測定時間を変えて何度も測定しましたが、モリサワのWEBフォントを適用しているときはPageSpeed Insightsのモバイルでの点数が良くて60点台、悪い時は50点台まで落ち込み、モリサワのWEBフォントを外すと70点台に回復します。
ちなみにPCの方は何回やっても90点以上で導入前と変わらない数値がでるので、表示速度に問題が出るのはモバイルだけのようでした。
元に戻しました
僕はWEBサイトで一番大切なのは表示速度だと思っています。
どんなに良い事が書いてあるブログでも、表示に時間がかかるサイトは僕なら見ません。
モリサワのWEBフォントの見た目はとても好きなのですが、僕の環境では導入するとモバイルの速度に影響が出るので設定を削除して導入元の状態に戻しました。
環境によっては速度に影響がない場合もあるかもしれないので、興味がある方はためしてみてください。
止めたくなった時は簡単にやめられるので、気軽に試してみるといいと思います。
何でも実験することが大事
それでは、またー。
コメント