更新日: 公開日: 著者:
関連タグ:

エックスサーバーでWebフォントを使う条件・Webフォント一覧・設定方法を教えます!

かずき
かずき
兵庫県神戸市在住、鹿児島生まれ。スマホ(android/iPhone)やガジェットが大好きで、親子で使い倒しています。LINE・facebook・TwitterなどSNSは10年以上、格安SIM・格安スマホは5年以上活用しています。
お越しいただき、ありがとうございます。
もし当記事が参考になりましたら励みになりますので、ブックマークSNSでのシェア・フォローの程、よろしくお願いいたします。 ご意見ご感想ご指摘はコメントにてお願い致します。
  • はてなブックマーク
  • facebook
  • twitter
  • Pocket
  • LINE
かずき

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古印体
  • さくらぎ蛍雪
UD書体
  • 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フォント設定の追加”画面で、ドメインを確認し設定するをタップ。

月間75,000PV

設定完了です。

”Webフォント設定”画面では、月間PVの確認ができるようになり、月間75,000PVを超すとWebフォントが初期設定のフォントに戻ります。

ただ、サーバーパネルでWebフォント設定をオンにしただけでは、サイトには反映されません。

設定後、使いたいWebフォントを選ぶ必要があります。

WordPressサイトにWebフォントを反映!

WordPressサイトにWebフォントを反映するには、WordPressダッシュボードを開き、左メニューからプラグインをタップ。

プラグインリストに”TypeSquare Webfonts for エックスサーバー”とあるので有効化します。

プラグインが無ければ、プラグイン新規追加から検索してインストールしてください。

TypeSquare Webfonts

有効化すると左メニューの下部に、TypeSquare Webfontsとあるのでタップ。

TypeSquare Webfonts Plugin for エックスサーバー”画面が開きます。

TypeSquare Webfonts Plugin for エックスサーバー

”TypeSquare Webfonts Plugin for エックスサーバー”でWebフォントを指定するのですが、予めWebフォントのテーマが用意されています。

TypeSquare Webfonts Plugin for エックスサーバー

WebサイトにあったWebフォントの組み合わせを選んでください。

新しくテーマを作成する

新しくテーマを作成する

新しくテーマを作成するをタップすると、タイトル・リード・本文・太字など自分好みにフォントを指定できます。

上級者向けのカスタマイズ

WebサイトにあったWebフォント

”上級者向けのカスタマイズ”では、CSSのクラスごとにWebフォントを指定できたり、記事ごとにWebフォントを設定する事だってできます。

本文にWebフォントが反映されなければ、本文クラスに”.hentry”を設定してみてください。または本文クラスの変更を。

クラス指定でWebフォント

HTML・CSSがわかる方は、クラス指定でWebフォントを設定する方がイメージに合ったWebサイトにできると思います。

WordPressサイトにWebフォントを反映!

HTMLサイトにWebフォントを反映するには、各HTMLに下記”JavaScript”を挿入し、CSSにフォントを記述します

JavaScript

<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”; }

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フォント設定”でドメインを削除

いずれも1も2も忘れずにしましょう!

エックスサーバーは簡単にWebフォントを試せます!

「Webフォントを使ってみたくなった!」

って方は、まずはやってみましょう!

エックスサーバーではWebフォントの設定・反映を簡単にできるので是非使ってみてください。

なお、下記サイトでは、ご自身のWebサイトを使ってWebフォントを試す事ができます。

Webフォントシミュレータ

Webフォントシミュレータ

Webフォントを使うメリット・デメリットは下記。
関連 【エックスサーバー】Webフォントを使うメリット・デメリット!

エックスサーバーについては下記関連記事もご覧ください。





参照 エックスサーバー公式サイト

以上、エックスサーバーで運営サイトにWebフォントを設定する方法でした。

ご意見・ご質問ありましたらコメントください。

コメント利用規約
・誹謗中傷、過激かつ攻撃的なコメントはIPアドレスを明記して公開する場合があります。
・コメント機能は予告なく廃止する場合があります。
コメント欄が無い記事はコメントを受け付けていません。

0 コメント
Inline Feedbacks
View all comments