Xserverで使える無料のWebフォントの使い方

公開2019.07.16更新2020.05.10

Xserverでは無料でWebフォントを使うことができます。2019年7月8日に今までの利用可能なドメイン数が1つから3つになり、月間PV数が25,000PVから75,000PVへとそれぞれ3倍になったのでこれを機会に使い方のおさらいをしてみようと思います。

設定方法は「WordPressプラグイン」と「HTML記述形式」があるのですが、今回は「HTML記述形式」での設定方法をご紹介します。

Xserverのサーバーパネルでの設定

まずはサーバーパネル上でWebフォントを有効にします。

サーバーパネルにログインして、ホームページの項目の「Webフォント設定」を選択します。

続いて、Webフォントを利用したいドメインの右側「選択する」を押します。

タブの「Webフォント設定の追加」を押してからWebフォントを使用したいドメインを選んでから「設定する」を押します。

設定後は「Webフォント設定」に設定したドメインが表示されます。

これでXserverのサーバーパネル上での設定は完了です。

HTML上での設定

ここからはとてもカンタンで、下記のものを順に実行していくだけです、

Webフォントを利用したいHTML上にJavascriptを読み込む

Webフォントを利用したいHTML上に下記コードを入れるのですが、</head>タグの直前に入れることが推奨されているそうです。

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

CSSで使いたいフォントを指定する

記事執筆時点では、「モリサワ」さんが提供する「TypeSquare」から下記の30書体のWebフォントが利用可能です。

2019.08.25

赤字のフォントが追加されましたので、下の表とフォントの確認サイトに追加しました。

明朝体	リュウミン 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

Xserverのサイトでは画像でしか見ることが出来ないので、実際にブラウザで確認できるサイトを作ってしまいました。

このサイトを作っている時にとあることに気付いてしまったのですが、その内容は後述しますね…

話は戻って、CSSの指定ですが例えば「ゴシック体」グループの「新ゴ B」を適用させるには、フォントを指定したい要素に下記のように書きます。

p { font-family: 新ゴ B;}
p { font-family: Shin Go Bold;}

なぜか日本語指定と英字指定があるのですが、両方指定してはいけません。どちらか片方を記述してください。

XserverのWebフォントでは、モリサワさんの「TypeSquare」が使われているのですが、

フォントファイルが２回読み込まれているだと…？

参照：jdash2000 site

とのことです。詳しくはこちらのサイトで解説されていますが、2回同じものが読み込まれてしまうって意味ないですよね（汗

というわけでカンタンに書かれたHTMLはこんな感じになりました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XserverのWebフォントを使う</title>
<script src="//webfonts.xserver.jp/js/xserver.js"></script>
<style>
	p { font-family: Shin Go Bold;}
</style>
</head>

<body>
<p>「ゴシック体」グループの「新ゴ B」が適用されます。</p>
</body>
</html>

CSSはもちろん外部ファイルでOKですよ♪

CSSの記述ですが、Xserverのサイトにも書かれているのですが見に行くのも面倒なので作ったサイトに書いておきました。