ご質問・検証ごと・体験レビュー等ありましたらお気軽にコメントをお寄せください。
更新日:
関連タグ:

「サイトの文字を読みやすくできる?」エックスサーバーでWebフォントを使う条件・設定方法!

  • はてなブックマーク
  • facebook
  • twitter
著者:かずき

webフォントを使ってサイトの文字を読みやすくしましょう!運営サイトに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フォントを設定する方法でした。

著者:
兵庫県神戸市在住、鹿児島生まれ。android/iPhone・Amazon Fire・格安SIM・格安スマホ・ガジェット・スマホアプリ・SNSなど、モバイル関連の役立つ情報・使い方を親子で調査・レビューしています。
  • はてなブックマーク
  • facebook
  • twitter
記事が参考になりましたら励みになりますので、ブックマークSNSでのシェアの程、宜しくお願いいたします。
ご質問・体験レビュー等ありましたらコメントいただけると幸いです。
コメント利用規約
・誹謗中傷、過激かつ攻撃的なコメントはIPアドレスを明記して公開する場合があります。
・検証依頼・読者様の体験レビューなども是非書き込みお願い致します。
コメント欄が無い記事はコメントを受け付けていません。
0 コメント
Inline Feedbacks
View all comments
こちらもチェック!

  • UQモバイル
    • キャッシュバックあり!
    • 3ギガ1,480円 (税込1,628円)
    • 15ギガ2,480円 (税込2,728円)
    • 余ったギガ翌月繰り越し!
    • 10分かけ放題770円 (税込847円)
    • 節約モードで通信し放題!
  • マイネオ
    • 3カ月間1,000円割引!
    • 10ギガ1,780円 (税込1,958円)
    • 20ギガ1,980円 (税込2,178円)
    • 10分かけ放題850円 (税込935円)
    • メールアドレス無料発行
  • 楽天モバイル
    • 3カ月無料キャンペーン中!
    • 2台目用として最強!
    • 1ギガまで無料
    • 3ギガまで980円 (税込1,078円)
    • 20ギガまで1,980円 (税込2,178円)
    • 20ギガ以上2,980円 (税込3,278円)
    • 楽天リンク利用で通話無料
  • ビッグローブモバイル
    • 月308円でYoutubeが通信し放題!
    • 6ギガ1,700円 (税込1,870円)
    • 10分かけ放題830円 (税込913円)
    • YouTubeを見てる方におすすめ!
  • ドネドネ
    • 1万円キャッシュバック+初期費用0円
    • 月間利用ギガ数50ギガ
    • 音声通話付きで 月額2,728円
    • 社会貢献団体への寄付込
  • ワイモバイル
    • 3ギガ1,980円 (税込2,178円)
    • 15ギガ2,980円 (税込3,278円)
    • 2回線目以降1,100円割引
    • 10分かけ放題700円 (税込770円)
  • IIJmio
    • eSIMプランが安い!
    • 4ギガ980円 (税込1,078円)
    • 8ギガ1,380円 (税込1,518円)
    • 20ギガ1,880円 (税込2,068円)
    • 10分かけ放題830円 (税込913円)
  • povo2.0とは?
    • ギガ増量中!
    • 20ギガ2,480円 (税込2,728円)
    • 5分かけ放題500円 (税込550円)
    • 24時間通信し放題220円/日
    • キャリ決済〇
  • アハモとは?
    • dポイント3,000円分付き
    • 20ギガ2,700円 (税込2,970円)
    • 5分かけ放題付き
    • 家族割引〇
    • キャリ決済×
  • ラインモとは?
    • PayPayボーナス3,000円分付き
    • 20ギガ2,480円 (税込2,728円)
    • 5分かけ放題500円 (税込550円)
    • LINEスタンプ使い放題
    • LINEデータフリー
  • OCNモバイル
  • 日本通信SIM
  • ニューロモバイル
  • イオンモバイル
  • au回線の格安SIM
  • ドコモ回線の格安SIM
  • ワイマックス
  • ビッグローブワイマックス
  • この記事でわかること(目次)

  •