WebフォントをWebサイトで使いたいと検討中でしょうか？
人気のレンタルサーバーである「エックスサーバー」は、日本語フォント含め、設定できるWebフォントの数が豊富です。
既にエックスサーバーを使ってる方は、WebサイトにWebフォントを設定してみませんか？
Webフォントに変えるだけで、ユーザーから見てもらいやすく読んでもらいやすいサイトにできるので、使わないのは勿体ないです！
当記事では、人気のレンタルサーバー「エックスサーバー」でのWebフォントの設定方法を紹介します。
スポンサーリンクエックスサーバーでWebフォントを使う条件
エックスサーバーが提供するWebフォントを使うには、いくつか条件があります。
条件をクリアしてる方は積極的に使う事をおすすめします！
プラン
全プラン無料で使え、商用利用もできます！
アクセス制限・アクセス拒否が設定してあるWebサイトでも使えます。
利用可能ドメイン数
3ドメイン
サブドメインも1ドメインにカウントされるので注意が必要です。
月間基本PV
75,000PV/月
3ドメインで月間75,000PVを超過するとWebフォントの効果が適用されなくなります。PVのあるWebサイトやブログでは使いにくいです。
PVの少ないWebサイトをWebフォントを使って輝かせましょう！
なお、メールフォームの入力欄にはWebフォントは適用されません。こだわりのある方は注意されてください。
エックスサーバーで無料で使えるWebフォント一覧
エックスサーバーが提供するWebフォントは、どんどん増えています！これもエックスサーバーの魅力のひとつ！
設定できるWebフォントは2019年8月現在、33書体です。
- リュウミン R-KL
- リュウミン B-KL
- 黎ミン M
- A1明朝
- しまなみ
- 新ゴ R
- 新ゴ B
- ゴシックMB101 B
- 見出ゴMB31
- 中ゴシックBBB
- じゅん 201
- じゅん 501
- 新丸ゴ R
- 秀英にじみ丸ゴ B
- 丸フォーク M
- フォーク M
- シネマレター
- G2サンセリフ-B
- 那欽
- 竹 B
- ぶらっしゅ
- トーキング
- すずむし
- はるひ学園
- 新ゴ シャドウ
- 教科書ICA M
- 陸隷
- TB古印体
- さくらぎ蛍雪
- TBUDゴシック R
- TBUDゴシック E
- UD新ゴ コンデンス90 L
- UD新ゴ コンデンス90 M
全33書体、特に”新ゴ”フォントは、デザイナーが良く使うので積極的に設定するのが良いでしょう。
エックスサーバーでWebフォントを使う設定方法
エックスサーバーでWebフォントを使う設定方法を紹介します。
設定は、”WordPressで構築したWebサイト”と”HTMLで構築したWebサイト”とやり方が違います。
初めてでも簡単にできる！エックスサーバーでWordPressをインストールする方法
サーバーパネル
まず、エックスサーバーのサーバーパネルにアクセスします。
Webフォント設定とあるのでタップ。
Webフォントを設定するWebサイトのドメインを選択。
”Webフォント設定の追加”画面で、ドメインを確認し設定するをタップ。
設定完了です。”Webフォント設定”画面から月間PVの確認ができるようになります。月間75,000PVを超すとWebフォントの適用が止まります。また、削除（オフ）もできます。
忘れてはならないのは、サーバーパネルでの設定は機能をオンにしただけなので、WebサイトにWebフォントは反映されません。
以下、自身のWebサイトにあった設定をしていく必要があります。
WordPressで構築したWebサイト
Webフォントを設定するWebサイトのWordPress管理画面を開き、左メニューからプラグインをタップ。
プラグインリストに”TypeSquare Webfonts for エックスサーバー”があるので有効化します。
プラグインが無ければ、プラグイン新規追加から検索してインストールしてください。
有効化すると左メニューの下部に、TypeSquare Webfontsとあるのでタップ。
”TypeSquare Webfonts Plugin for エックスサーバー”画面が開きます。
”TypeSquare Webfonts Plugin for エックスサーバー”でWebフォントを指定するのですが、予めWebフォントのテーマが用意されています。
WebサイトにあったWebフォントの組み合わせを選びましょう！
【新しくテーマを作成する】
新しくテーマを作成するをタップすると、タイトル・リード・本文・太字など自分好みにフォントを指定できます。
【上級者向けのカスタマイズ】
”上級者向けのカスタマイズ”では、CSSのクラスごとにWebフォントを指定できたり、記事ごとにWebフォントを設定する事だってできます。
本文にWebフォントが反映されなければ、本文クラスに”.hentry”を設定してみてください。または本文クラスの変更を。
HTML・CSSがわかる方は、クラス指定でWebフォントを設定する方がイメージに合ったWebサイトにできると思います。
HTMLで構築したWebサイト
Webフォントを設定するWebサイトがWordPressなどCMSじゃない場合は、HTMLにJavaScriptを挿入し、CSSにフォントを指定します。
<script type="text/javascript" src="//webfonts.xserver.jp/js/xserver.js"></script>
CSSには例えば…
h1{ font-family: "新ゴ B"; }
p{ font-family: "見出しゴMB31"; }
b{ font-family: "中ゴシックBBB"; }
エックスサーバーが提供するWebフォントの書体を手入力で指定します。
WordPressと比べ、Webフォントの変更をする際は面倒です。
エックスサーバーのWebフォントを解除する方法
「もうWebフォントは使わなくていいや！」
「Webサイトをリニューアルして合ったWebフォントが無くて使わなくなった！」
「Webサイトが月間75,000PVを軽く超えるようになった！」
そんな時は、Webフォントサービスをオフ（解除）にしましょう。解除しなければ、WebフォントのソースコードがHTMLに残ったままになるので、SEOや読み込み速度で何かしら支障が出てくるかも？
エックスサーバーのWebフォントサービスのオフ（解除）は、オンにした作業の逆をすればOK！
WordPressで構築したWebサイト
１WordPress管理画面のプラグインで、”TypeSquare Webfonts for エックスサーバー”を停止させます。
２エックスサーバーのサーバーパネルの”Webフォント設定”でドメインを削除。
HTMLで構築したWebサイト
１HTMLからWebフォント用のJavaScriptを削除します。
２エックスサーバーのサーバーパネルの”Webフォント設定”でドメインを削除。
いずれも１も２も忘れずにしましょう！
Webフォントはまだ使ったことが無い！
って方は、まずはやってみないと分からないと思うので、エックスサーバーが簡単に設定できるようにしているので、使ってみてください。
なお、下記サイトでは、ご自身のWebサイトを使ってWebフォントを試してみる事ができます。
Webフォントシミュレータ
Webフォントを使うメリット・デメリットは下記。
【エックスサーバー】Webフォントを使うメリット・デメリット！
以上、人気のレンタルサーバー「エックスサーバー」でのWebフォントの設定方法でした。