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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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フォントが反映されます。

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

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

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

そして

Webフォントの適用箇所

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

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

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

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

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

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

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

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

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

また「フォント設定クラス」の下の「個別記事フォント設定」から「記事ごとにフォント設定」にチェックを入れれば、記事ごとにエックスサーバーの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 {
　font-family: "Kointai-M";
}

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

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

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

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

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

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

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

Webフォントスタイル一覧

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

参考：エックスサーバー

Webフォント書体一覧

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

ー明朝体ー

ーゴシック体ー

ー丸ゴシック体ー

ーデザイン書体ー

ー装飾書体ー

ー筆書体ー

ーUD書体ー