エックスサーバーのWebフォントの使い方:フォント一覧付き

エックスサーバーのWebフォントの使い方:フォント一覧付き

エックスサーバーを使用してる人なら無料で使用することができるWebフォント「モリサワ」

モリサワWebフォントのことはあまり詳しくないですが調べてみると、なかなかお値段のするフォントなのですね。

そのモリサワのWebフォントがエックスサーバーを使用してると無料で使用できるので使い方を学んでみました。

使用する条件としてPV数が関係するので、それも踏まえて説明していきます。

 

エックスサーバーのWebフォントを使える条件

 

エックスサーバーのWebフォントの使い方の前に知っておきたい「Webフォントを使える条件」があります。

エックスサーバーのWebフォントが使える「Webフォント設定」はサーバーアカウント全体で月間75,000PVまで使用が可能です。

そしてWordPressの場合の使える条件はプラグインの説明を確認すると月間25,000ページビューまでご利用になれます。となっています。

PV数が上限を超えた場合はエックスサーバーのWebフォントは使用されずに、ブラウザ標準のフォントやサイトで使用してるフォントが表示されるようになります。

 

Advertisement

 

PVが達してしまうとエックスサーバーのWebフォントは適用から外れてしまうようです。いきなり使用していたエックスサーバーのWebフォントが解除されて慌てないために「Webフォント設定」にてPV数の目安が分かるようになってるのでWebフォント設定と合わせて下記で紹介します。

 

エックスサーバーのWebフォント設定の使い方

 

エックスサーバーのWebフォントを使いたい場合の「Webフォント設定」の使い方です。

下記の手順でエックスサーバーの「Webフォント設定」まで進みます。

 

  1. サーバーパネル
  2. Webフォント設定
  3. Webフォント設定の追加

 

そしてWebフォント設定の追加で「設定対象ドメイン」を選択します。

これでエックスサーバー側の設定は完了です。

 

 

Webフォント設定をしてみると分かるのですが、設定をした後にWebフォント設定画面には「月初から昨日までの合計PV数は 0PV/75,000PVです。」のようにPV数が表示されます。

 

Advertisement

 

Webフォント設定からエックスサーバーのWebフォント使用PV上限に対しての現在PV数を確認できるので、Webフォントを使用する「目安」とした使い方ができます。

 

xserverのWebフォントの使い方は2種類

 

実際にエックスサーバーのWebフォントを使用するWebサイト側での使い方ですが2種類あります。

 

  • WordPressサイトの場合
  • HTMLサイトの場合

 

上記の2種類の使い方があるので、初めにWordPressサイトの場合の「プラグイン」の使い方から紹介します。

エックスサーバーを使用してWordPressを使い始めたときに初めからエックスサーバーのプラグインが入っていたと思います。

 

エックスサーバーのプラグイン名は「TypeSquare Webfonts for エックスサーバー」

 

「TypeSquare Webfonts for エックスサーバー」を必要ないと思い削除してしまっていても下記からダウンロードできます。

 

 

 

typesquare webfonts for エックスサーバーの使い方

 

TypeSquare Webfonts for エックスサーバーをWordPressにインストールして有効にすると管理画面のサイドメニューに「TypeSquare Webfonts」と表示されます。

 

 

表示された「TypeSquare Webfonts」をクリックするとエックスサーバーのWebフォント設定に進めます。

 

 

上の画像のようにTypeSquare Webfonts for エックスサーバーの設定画面では元から作成してあるフォントテーマを13種類使うことができます。

13種類から使いたい「フォントテーマ」を選んで「フォントテーマを更新する」をクリックするとエックスサーバーのWebフォントが反映されます。

 

Advertisement

 

Webフォントを部分ごとに使えるように自分でフォント種類を組み立ててオリジナルのWebフォントテーマにした使い方もできます。

その場合は13種類あるフォントテーマ項目の一番上にある項目の「新しくテーマを作る」から作成します。

 

テーマタイトルを決めます。

そして

Webフォントの適用箇所

 

  • タイトル
  • リード
  • 本文
  • 太字

 

上記Webフォント適用箇所にエックスサーバーのWebフォントの「書体」「フォントファミリー」「フォント名」を選んでWebフォントのセットをします。

セットできたら「フォントテーマを更新する」で作成完了。

 

フォント設定クラスについて

※画像の「hoge」は適当に指定しただけなので、HTMLのタグで指定をしてください。

 

Webフォントの適用箇所に出てきた「タイトル」「リード」「本文」「太字」が適用される箇所というのは「フォント設定クラス」に表示されてるタグの部分に適用されます。

それなのでエックスサーバーのWebフォントを適用したくないとか、逆に追加したい部分がある場合は「フォント設定クラス」からタグを削除したり追加してクラス設定してコントロールができます。

 

 

例えば上記画像のようなシンプルなフォントで書かれた文章から「フォント設定クラス」を使うと下記のようなWebフォントの変更をする使い方ができます。

 

 

本文の箇所の設定したWebフォントを適用するHTMLタグで囲みます。<strong>タグの部分は強調タグの部分として使用したり、他に新たにタグを追加してWebフォントの使い方をコントロールしていく適用のさせ方ができると思います。

 

Advertisement

 

また「フォント設定クラス」の下の「個別記事フォント設定」から「記事ごとにフォント設定」にチェックを入れれば、記事ごとにエックスサーバーのWebフォント適用する使い方ができます。

プラグインの使い方がややこしいなと思えばHTMLで使う方法にすると簡単に使えるかと思います。

 

WebフォントをHTMLで使う方法

 

エックスサーバーのWebフォントを使うサイトがHTMLサイトの場合に必要になってくるHTMLを記述して使う方法です。

HTMLサイトを主にしてますが、WordPressを使ったサイトにもHTMLを使う方法で使用することができます。

 

<script type="text/javascript" src="//webfonts.xserver.jp/js/xserver.js"></script>

 

まずはscriptをエックスサーバーのWebフォントを使いたいHTMLページの</head>直上に記述します。

そしてエックスサーバーのWebフォントを適用したいHTML要素にCSSでフォントファミリーをあてていきます。

 

<h2>Webフォントで表示される文</h2>

 

例えばページ内のh2タグにWebフォントを適用するとします。

 

h2{
 font-family: "Kointai-M";
}

 

CSSでh2タグに対してfont-familyの値を選んで指定したWebフォントが表示できます。

 

 

個人的にはHTMLとCSSでWebフォントを表示させるほうが慣れてるので使い方が楽でした、

 

エックスサーバーのWebフォント一覧

 

エックスサーバーで使用できるWebフォントは「モリサワフォント」です。

使用できるモリサワのWebフォントを一覧にしてみました。

font-familyでWebフォントを指定するスタイルの一覧とWebフォントの書体例の一覧にしてます。

使用できるWebフォントの種類は30種類です。

 

Webフォントスタイル一覧

 

Webフォントスタイル一覧の「日本語で記述」または「英語で記述」のどちらかをCSSで記述します。

 

日本語で記述英語で記述
リュウミン R-KLRyumin Regular KL
リュウミン B-KLRyumin Bold KL
黎ミン MReimin Medium
A1明朝A1 Mincho
新ゴ RShin Go Regular
新ゴ BShin Go Bold
ゴシックMB101 BGothic MB101
見出しゴMB31Midashi Go MB31
中ゴシックBBBGothic Medium BBB
じゅん 201Jun 201
じゅん 501Jun 501
新丸ゴ RShin Maru Go Regular
丸フォーク MMaru Folk Medium
フォーク MFolk Medium
シネマレターCinema Letter
はるひ学園Haruhi Gakuen
G2サンセリフ-BGSanSerif-B
那欽Nachin
竹 BTake Bold
新ゴ シャドウShin Go Shadow
ぶらっしゅBrush-U
トーキングTalking
すずむしSuzumushi
教科書ICA MKyoukasho ICA Medium
陸隷Likurei
TB古印体Kointai-M
TBUDゴシック RTBUDGothic R
TBUDゴシック ETBUDGothic E
UD新ゴ コンデンス90 LUD Shin Go Conde90 L
UD新ゴ コンデンス90 MUD Shin Go Conde90 M

参考:エックスサーバー

 

Webフォント書体一覧

 

次にWebフォントスタイルの一覧で指定したら実際に表示されるWebフォントの書体の一覧です。

 

 

ー明朝体ー

 

リュウミンR-KL

 

リュウミンB-KL

 

黎ミンM

 

A1明朝

 

 

ーゴシック体ー

 

新ゴ R

 

新ゴ B

 

ゴシックMB101B

 

見出ゴMB31

 

中ゴシックBBB

 

 

ー丸ゴシック体ー

 

じゅん 201

 

じゅん 501

 

新丸ゴ R

 

 

ーデザイン書体ー

 

丸フォーク M

 

フォーク M

 

シネマレター

 

Advertisement

 

はるひ学園

 

G2サンセリフ-B

 

那欽

 

竹 B

 

ぶらっしゅ

 

トーキング

 

すずむし

 

 

ー装飾書体ー

 

新ゴ シャドウ

 

 

ー筆書体ー

 

教科書ICA M

 

陸隷

 

TB 古印体

 

 

ーUD書体ー

 

TBUDゴシック R

 

TBUDゴシック E

 

UD新ゴ コンデンス 90 L

 

 

UD新ゴ コンデンス90 M

 

エックスサーバーカテゴリの最新記事