
webフォントを使ってサイトのテキストを読みやすくしましょう!YouTubeの台頭があり、今はあまり文字を読んもらえない時代かな?しかし、webフォントを運営サイトに設定すれば、見た目もテキストも生まれ変わったかのようになるので、読んでくれる率や滞在時間の向上に一役買えると思います!
Webフォントを運営サイトで使ってみたいと検討中でしょうか?
人気レンタルサーバーの「エックスサーバー」にはwebフォント機能があります。
無料で使え、設定できるWebフォントの数が豊富です。勿論、日本語フォントもたくさんあります。
既にエックスサーバーを使ってる方は、運営サイトにWebフォントを設定してみませんか?
PCデフォルトのフォントからWebフォントに変えるだけで、ユーザーから見てもらいやすく読んでもらいやすいサイトにできるので、使わないのは勿体ないです!
当記事では、エックスサーバーでWebフォントを使う条件・Webフォント一覧・設定方法を紹介します。
スポンサーリンク
この記事でわかること!
エックスサーバーでWebフォントを使う条件
エックスサーバーが提供するWebフォントを使うには、いくつか条件があります。
条件をクリアしてる方は積極的に使う事をおすすめします!
無料で使えます!
全プラン無料で使え、商用利用もできます!
アクセス制限・アクセス拒否が設定してあるWebサイトでも使えますよ。
利用可能ドメイン数
3ドメイン
エックスサーバーを1つ契約するだけで複数のサイトを開設・運営できますが、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フォントを使う設定方法を紹介します。
大まかに設定する事は2つあります。
- 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サイト
1WordPress管理画面のプラグインで、”TypeSquare Webfonts for エックスサーバー”を停止させます。
2エックスサーバーのサーバーパネルの”Webフォント設定”でドメインを削除。
HTMLで構築したWebサイト
1HTMLからWebフォント用のJavaScriptを削除します。
2エックスサーバーのサーバーパネルの”Webフォント設定”でドメインを削除。
いずれも1も2も忘れずにしましょう!
エックスサーバーは簡単にWebフォントを試せます!
「Webフォントを使ってみたくなった!」
って方は、まずはやってみましょう!
エックスサーバーではWebフォントの設定・反映を簡単にできるので是非使ってみてください。
なお、下記サイトでは、ご自身のWebサイトを使ってWebフォントを試す事ができます。

Webフォントを使うメリット・デメリットは下記。
関連 【エックスサーバー】Webフォントを使うメリット・デメリット!
エックスサーバーについては下記関連記事もご覧ください。
以上、エックスサーバーで運営サイトにWebフォントを設定する方法でした。
・誹謗中傷、過激かつ攻撃的なコメントはIPアドレスを明記して公開する場合があります。
・読者様の体験レビューも是非書き込みお願い致します。
※コメント欄が無い記事はコメントを受け付けていません。