こんにちは！
エルバスです。
先日、エックスサーバーが提供する、『モリサワのWebフォントが無料で使える「Webフォント」機能のバージョンアップのお知らせ』が届きました。
webフォントは以前から気になっていましたが、導入していなかったのでこれをきっかけに使ってみる事にしました！
作業はとても簡単で、5分も掛からず設定できます。
設定方法をまとめたので、エックスサーバーのwebフォントを試してみようかなと思われている方は是非参考にしてください。
CONTENTS
webフォントって何？
webフォントを使用しない場合、サイト運営者側と閲覧者側のフォントが異なる場合があります。
理由は、閲覧者の端末で使われているフォントが、閲覧者側の端末でインストールされていない為です。
その場合、自動的に閲覧者側の端末で使われているフォントに変換され、サイト運営者が予期していないデザインになってしまいます。
フォントによってサイトイメージは大きく変わるので、サイト運営者にとっては大きな問題です。
webフォントはその問題をクリアする為に、サーバー上にある共通フォント使用し、どの端末からも同じデザインで見えるようにする機能です。
無料で使えるエックスサーバーのwebフォント
現在、モリサワが提供している『TypeSquare』のwebフォントをエックスサーバー利用者であれば”無料”で使用可能です。（※ 「TypeSquare」で提供されているWebフォントのうち、30書体まで）
直接導入する場合、TypeSquareにも無料プランもありますが、月1万pvまでのサイトでしか使えません。
エックスサーバーにも上限はありますが、月間最大で2万5千pvまで”無料”で使用可能です。その上設定がとても簡単なので、エックスサーバーを使用している方にとっては非常にありがたいサービスです。
もしまだ、月間2万5千pvを超えていない方は、使わないと損です！！
※ webフォントの無料プランは一つのドメインでしか使えません。
今回のバージョンアップについて
以前からエックスサーバーは、無料で使えるwebフォントサービスを行っていました。
今回（2019年3月）、Windows環境での表示がより美しくなるバージョンアップをして新たに登場しました！
簡単にwebフォント設置する方法
早速、エックスサーバーサービスを使ってwebフォントの設定をしてみたいと思います！
※画像が見づらい場合は、画像をクリックしてください。拡大します。
サーバーパネルにログイン後、『webフォント』をクリック。
次に、『webフォント』を設定する『ドメインを選択』します。
エックスサーバーのwebフォントサービスは、一つのドメインしか使えません。
他のドメインで使いたい場合は、一度設定したドメインを削除【解除】してから、新規ドメインを設定し直す必要があります。
サーバーパネルでの作業はこれだけです。
次にwordpressに、プラグイン「TypeSquare Webfonts for エックスサーバー」をインストール&有効化します。
「TypeSquare Webfonts for エックスサーバー」インストール（コピペしてください）
インストール後、有効化します。
有効化すると管理画面左側に設定画面が表示されます。
①をクリックし、②でフォントテーマを選択します。
「TypeSquare Webfonts for エックスサーバー」で利用出来るTypeSquareフォントは、
以上の30種類です。
最後に、『フォントテーマを更新する』をクリックして設定は以上です。
次の項目で実際にどんなフォントなのか見ていきましょう。
TypeSquareのフォントテーマ一例
上図のwebフォント30種類を組み合わせて、自由に組み合わせる事も出来ます。
しかし、エックスサーバーが推奨しているフォントテーマを選択する方が、非常に簡単なのでお勧めです。
ベーシック
ニュース
ビジネス
エレガント
レトロ
ホラー
他にもフォントテーマがあるので、実際にご自身でサイトにあったテーマを見つけてみて下さい。
記事ごとにフォントを設定する事も可能です。
webフォントは表示速度が遅くなる？
webフォントを使用すると表示速度が遅くなるデメリットを見かけますが、
日本語フォントは文字数が多くファイルサイズが大きいため表示速度が遅いと言われていますが、「TypeSquare」で提供されるWebフォントサービスは必要な文字ファイルだけ読み込んで表示させる仕組みになっているため、スピーディに表示させることが可能です。
とエックスサーバー内で説明があるので、心配はいりません。
実際に僕も、『pagespeed insights』で計測してみましたが、何の問題もありませんでした。
まとめ
エックスサーバーが提供するwebフォントを使用する事で、オリジナリティ溢れるサイトを簡単に作成する事が可能です！
エックスサーバーを使用していて、まだ月間2万5千pvに達していない方は是非使ってみてください！
コメントを残す