エックスサーバーでWebフォントを使う設定方法（条件・一覧）

WebフォントをWebサイトで使いたいと検討中でしょうか？

人気のレンタルサーバーである「エックスサーバー」は、日本語フォント含め、設定できるWebフォントの数が豊富です。

既にエックスサーバーを使ってる方は、Webサイトに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フォントの設定方法でした。