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

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>タグの直前に入れることが推奨されているそうです。

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」を適用させるには、フォントを指定したい要素に下記のように書きます。

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

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

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

参照:jdash2000 site

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

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

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

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

サイトのキャプチャですが、こんな感じです。

 

 

赤枠部分からコピーして使ってくださいね。

サイト作成中に気付いた問題点

最後に、サイトを作っている最中で気付いた問題点ですが「あとから書き換えられたコンテンツには適用されない」ということです。

今回作成したサイトでは、Google Fontsのように文字を打ち換えて確認できるようにしていたのですが最初に読み込まれた文字以外はWebフォントが適用されないんですよね…(最初から例文にあった「こ」「が」「た」「で」「。」のみがWebフォントが適用されています)

 

 

XserverでのWebフォントでは利用できないようですが、モリサワさんのオリジナル版「TypeSquare」には読み込み後に書き換えられた文字にもWebフォントを適用させる機能があるようです。

どうしても読み込み後に書き換えられたテキストにWebフォントを適用させたい場合は、こちらを使うしかなさそうです…Xserverさんではその記述がないのでおそらく使えないと思いますが、はやく搭載されて欲しいですね!