関連タグ:

Webフォントを使うメリット!エックスサーバーで無料で使う設定方法

  • はてなブックマーク 0
  • facebook 7
  • twitter

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

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

WebフォトンをWebサイトに設定すると、PC・スマホ・タブレットに入ってるフォントに関係なく、Webサイトのデザインに合ったフォントでユーザーに見せる事ができます。

カフェ・美容室・エステなど、オシャレを売りにする業種のWebサイトは、積極的にWebフォントは設定していきたいところ。

Web制作を依頼されてる方は、Webフォントを使って貰うように依頼しましょう!
Web制作をされてる方は、Webフォントの設定を提案していきましょう!

webフォントを使うメリット

  • Webサイトがオシャレに生まれ変わる!見栄えをよくできる!
  • ユーザーにとって見やすく読みやすくできる!
  • ユーザーの閲覧媒体(パソコン・スマホ)のフォントに関係なく、指定したフォントを表示できます。
  • 文字画像をWebフォントに変える事でSEO効果をアップできます!
  • エックスサーバーだと無料で使える!
  • モリサワ日本語Webフォントが豊富!
  • CSSで更なる装飾を付けて、ユーザーの滞在時間を伸ばせます。

エックスサーバーが提供するWebフォントは、日本語フォント含め、種類が豊富なので、選びやすい!使いやすい!

既にエックスサーバーを使ってる方は、WebサイトにWebフォントを設定してみませんか?

Webフォントに変えるだけで、ユーザーから見てもらいやすく読んでもらいやすいサイトにできるので、使わないのは勿体ないです!

エックスサーバーへのサーバー移行を検討されてる方は、Webフォントサービスについて、公式サイトもご覧ください!
月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

当記事では、人気のレンタルサーバー「エックスサーバー」での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古印体
  • さくらぎ蛍雪
UD書体
  • TBUDゴシック R
  • TBUDゴシック E
  • UD新ゴ コンデンス90 L
  • UD新ゴ コンデンス90 M

全33書体、特に”新ゴ”フォントは、デザイナーが良く使うので積極的に設定するのが良いでしょう。

エックスサーバーでWebフォントを使う設定方法

エックスサーバーでWebフォントを使う設定方法を紹介します。

設定は、”WordPressで構築したWebサイト”と”HTMLで構築したWebサイト”とやり方が違います。
初めてでも簡単にできる!エックスサーバーでWordPressをインストールする方法

サーバーパネル

まず、エックスサーバーのサーバーパネルにアクセスします。

Webフォント設定

Webフォント設定とあるのでタップ。

Webフォントを設定するWebサイトのドメインを選択。

Webフォント設定の追加

”Webフォント設定の追加”画面で、ドメインを確認し設定するをタップ。

月間75,000PV

設定完了です。”Webフォント設定”画面から月間PVの確認ができるようになります。月間75,000PVを超すとWebフォントの適用が止まります。また、削除(オフ)もできます。

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

以下、自身のWebサイトにあった設定をしていく必要があります。

WordPressで構築したWebサイト

Webフォントを設定する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サイトにできると思います。

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

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

Webフォントはまだ使ったことが無い!

って方は、まずはやってみないと分からないと思うので、エックスサーバーが簡単に設定できるようにしているので、使ってみてください。

Webフォントシミュレータ

なお、下記サイトでは、ご自身のWebサイトを使ってWebフォントを試してみる事ができます。
Webフォントシミュレータ

エックスサーバーは、Webフォントサービス含め、機能も充実しているので、レンタルサーバー選びに迷ってる方は10日のお試し期間もあるので是非使ってみてください。コスパが良いのが魅力!
月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

以上、人気のレンタルサーバー「エックスサーバー」でのWebフォントの設定方法でした。

関連記事もご覧ください。

 

運営者(登場人物)は、スマホ・ガジェットが大好きな実在する親子です♪

使い方・レビュー記事のアイテムは実際に買って長く使ってます♪

運営者情報