こんにちは！さて今回はWebフォントです。エックスサーバー でモリサワフォントのWebフォントが無料で提供されているということで、試してみました。モリサワフォントといえば古今東西様々なデザイナーさん方ご用達の業界標準フォント。

これが無料で使えるというのはXserverを利用する上での大きなメリットですよね。
ここでははじめに『Webフォントとは？』という点についての紹介と、Xserver契約者が利用できるモリサワフォントをWebサイトに適用させる方法、その際の注意点について紹介したいと思います！
それではいってみましょ〜！

Webフォントとは？

さて、Xserverでモリサワフォントを導入する方法についてご紹介する前に簡単にWebフォントについてご紹介したいと思います。昨今のWebサイトではcssを使ってWebフォントを読み込めます。従来のWebサイトではcssで指定できるフォントファミリーは『システムフォントを読み込む』の一択だったのですが、技術が進歩してWebサイトにも任意のフォントを適用させることができるようになりました。

これにより、従来おしゃれなフォントを使った装飾は画像でしか表現できなかったものがフォントを読み込んで表現できるようになり、デザインで可能な幅がグッと広がったというわけです。

また画像をやめてテキストとして埋め込むことが可能になるため、うまく導入することができればそういった面ではSEO的にもメリットがあるかもしれません。
※デメリットもあります。Webフォントを導入した時のメリットデメリットに関しては後述します。

Webフォントの入手方法

入手方法はWebフォントそのものをサーバーに設置して読み込むか、CDNや各種配信サービスを利用して導入します。

フォントそのものをWebサーバーに設置するやり方はシンプルですが、ほとんどの場合、CDNや各種配信サービスを利用してWebフォントを導入する方法が一般的です。

著名な配信サービスとしては以下があげられます。

1. Google Web Font
2. Adobe Type kit

Google Web Fontではもちろん上記以外にも英語フォントだけでいいならそれこそ無数にあります。
気になる人がいれば調べてみてもいいかもしれません。

Webフォントを導入するメリット・デメリット

そんなWebフォントをWebサイトへ導入する際の『メリット』『デメリット』についてご紹介いたします。

メリット

前述していますが、メリットはなんといってもデザイン幅の増大でしょう。いままでは画像でしか表現できなかったものがテキストで表現できるようになるのはSEO的な観点からいっても大きいと思います。

デメリット

逆にデメリットは何でしょう？以下のようなことがデメリットとしてあげられると思います。

1. ページの読み込み速度への影響
2. 和文フォントは有料ライセンスが必要なケースが多い

順に見ていきましょう。

ページの読み込み速度への影響

フォントはバイナリファイルです。実体のあるファイルになりますが、英文は文字数がそこまでないので問題ないものの、和文は『ひらがな』『カタカナ』『漢字』に加えて、全角英数など、多岐にわたるため、基本的には英文よりファイル自体が重いです。

ファイルが重いということは、ブラウザ側での解析もその分かかるということであり、表示速度が必然遅くなるというデメリットがあります。
この場合、cssで解決するのであれば『font-displayプロパティ』というプロパティがありますのでそちらを利用するか、JavaScriptを使って非同期読み込みなどを実装して回避するなどがあるといいでしょう。

和文フォントはGoogle fonts以外は様々なライセンスが絡む

Google Fontであればそのまま無料でライセンスに従って利用している限り利用できるのですが、あまり数がありません。
たとえばモリサワさんやFont Worksさんなどの著名なフォントを適用する場合、『モリサワパスポート』などのアカウント作成が必要となります。

また、Typekitなどもそうですが、『利用するwebページによるアクセス数上限をかけたサブスク』が発生します。
※従量課金制で、指定のアクセス数を超えたら料金がそのアカウントへ請求が自動で届く形

この辺も注意が必要です。

Xserverのモリサワフォント導入方法

さて、ここまでWebフォントの概要について解説してまいりました。ある程度概要を理解していただいたところで、本題のXserverでのモリサワフォント導入方法について紹介していきたいと思います。

Xserverのヘルプを参照する

まずはXserverのヘルプを参照しましょう。
やり方は2通りあり、WordPressのプラグインを利用した導入方法と、htmlとして直接読み込み、css指定する方法との2つです。
順にご紹介したいと思います。

以下ページの下部から設置に関して参照することができます。
以下よりお進みください。
https://www.xserver.ne.jp/functions/service_webfont.php

上記ですと冒頭、利用できる書体やCSSによるカスタマイズ事例、シミュレーションツールの紹介などがありますので、回りくどいという人は以下より、WordPress用のプラグインでの導入に関する設定マニュアル、html形式での導入に関する設定マニュアルを参照してください。

WordPressプラグイン 設定マニュアルはこちら
html形式での導入 設定マニュアルはこちら

Xserverのモリサワフォント導入時の注意点

さてそんなXserverでのモリサワフォントですが、以下のような制限がありますのでここは要チェックです。
特に3ドメイン、月間75,000pvまでで、PVのほうは75,000を超えると自動で解除されるそうなので利用前に導入予定のwebサイトの月間PVをある程度把握しておく必要があります！ここは要注意ですね！

なお、Xserverのサーバーパネル内でPVは確認できるようですのでそちらも併せてチェックするようにしましょう！

まとめ

ここまでXserverでのwebフォント導入方法について紹介してきました。
一長一短ですが、適切に利用できれば、導入したWebサイトのクオリティをグッとあげることができます！

ぜひ一度ご検討してみてください！

以上、Yeah-Manでした！