webフォントを使ってサイトのテキストを読みやすくしましょう！YouTubeの台頭があり、今はあまり文字を読んもらえない時代かな？しかし、webフォントを運営サイトに設定すれば、見た目もテキストも生まれ変わったかのようになるので、読んでくれる率や滞在時間の向上に一役買えると思います！
Webフォントを運営サイトで使ってみたいと検討中でしょうか？
人気レンタルサーバーの「エックスサーバー」にはwebフォント機能があります。
無料で使え、設定できるWebフォントの数が豊富です。勿論、日本語フォントもたくさんあります。
既にエックスサーバーを使ってる方は、運営サイトにWebフォントを設定してみませんか？
PCデフォルトのフォントからWebフォントに変えるだけで、ユーザーから見てもらいやすく読んでもらいやすいサイトにできるので、使わないのは勿体ないです！
当記事では、エックスサーバーでWebフォントを使う条件・Webフォント一覧・設定方法を紹介します。
スポンサーリンク
この記事でわかること！
エックスサーバーでWebフォントを使う条件
エックスサーバーが提供するWebフォントを使うには、いくつか条件があります。
条件をクリアしてる方は積極的に使う事をおすすめします！
無料で使えます！
全プラン無料で使え、商用利用もできます！
アクセス制限・アクセス拒否が設定してあるWebサイトでも使えますよ。
利用可能ドメイン数
３ドメイン
エックスサーバーを１つ契約するだけで複数のサイトを開設・運営できますが、Webフォントを設定できるのは３サイトまでです。
サブドメインも１ドメインとしてカウントされるので注意が必要です。
月間基本PV
75,000PV/月
３ドメインで月間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フォントを使う設定方法を紹介します。
大まかに設定する事は２つあります。
- Webフォント機能をオン！
- サイトに合ったWebフォント選び。
”WordPressサイト”と”HTMLサイト”では、Webフォント選び方法が違います。
Webフォント設定
まず、エックスサーバーのサーバーパネルにアクセスします。
Webフォント設定とあるのでタップ。
Webフォントを設定するWebサイトのドメインを選択。
”Webフォント設定の追加”画面で、ドメインを確認し設定するをタップ。
設定完了です。
ただ、サーバーパネルでWebフォント設定をオンにしただけでは、サイトには反映されません。
設定後、使いたいWebフォントを選ぶ必要があります。
WordPressサイトにWebフォントを反映！
WordPressサイトに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サイトにできると思います。
WordPressサイトにWebフォントを反映！
HTMLサイトにWebフォントを反映するには、各HTMLに下記”JavaScript”を挿入し、CSSにフォントを記述します。
JavaScript
CSS（記述例）
p{ font-family: “見出しゴMB31”; }
b{ font-family: “中ゴシックBBB”; }
HTMLサイトは、エックスサーバーが提供するWebフォントの書体を手入力で指定します。
WordPressサイトと比べ、HTMLサイトへのWebフォントの反映はちと面倒です。
エックスサーバーのWebフォント設定を解除する方法
「もうWebフォントは使わなくていいや！」
「Webサイトをリニューアルして合ったWebフォントが無くて使わなくなった！」
「Webサイトが月間75,000PVを軽く超えるようになった！」
そんな時は、Webフォントサービスをオフ（解除）にしましょう。解除しなければ、WebフォントのソースコードがHTMLに残ったままになるので、SEOや読み込み速度で何かしら支障が出てくるかもです？
エックスサーバーのWebフォントサービスのオフ（解除）は、オンにした作業の逆の手順です。
WordPressで構築したWebサイト
１WordPress管理画面のプラグインで、”TypeSquare Webfonts for エックスサーバー”を停止させます。
２エックスサーバーのサーバーパネルの”Webフォント設定”でドメインを削除。
HTMLで構築したWebサイト
１HTMLからWebフォント用のJavaScriptを削除します。
２エックスサーバーのサーバーパネルの”Webフォント設定”でドメインを削除。
いずれも１も２も忘れずにしましょう！
エックスサーバーは簡単にWebフォントを試せます！
「Webフォントを使ってみたくなった！」
って方は、まずはやってみましょう！
エックスサーバーではWebフォントの設定・反映を簡単にできるので是非使ってみてください。
なお、下記サイトでは、ご自身のWebサイトを使ってWebフォントを試す事ができます。
Webフォントを使うメリット・デメリットは下記。
関連 【エックスサーバー】Webフォントを使うメリット・デメリット！
エックスサーバーについては下記関連記事もご覧ください。
以上、エックスサーバーで運営サイトにWebフォントを設定する方法でした。
・誹謗中傷、過激かつ攻撃的なコメントはIPアドレスを明記して公開する場合があります。
・読者様の体験レビューも是非書き込みお願い致します。
※コメント欄が無い記事はコメントを受け付けていません。