エックスサーバーでレンタルサーバーを契約すると、モリサワWebフォントが使えます。

私の場合、サイト移転をエックスサーバーの「WordPress簡単以降」を使ったせいか、新規オープンのサイトには最初からプラグイン「TypeSquare Webfonts for エックスサーバー」がインストールされていました。

そのため、このプラグインを有効化することが利用の条件かと勘違いしてしまい、そのまま使い続けていました。

ただ個人ブログの場合、そこまで凝ったデザインフォントを使う場面がほとんど無く、普段はせいぜい見出しに使うくらいです。そうなると、プラグインを入れてまで使う必要があるのか？という疑問が生まれます。

プラグインを外したらモリサワフォントを使えなくなるという思い込みがあってジレンマに陥っていましたが、なんと、Webフォントを使う方法は2種類用意されていることに気づきました。

もうひとつの方法ならプラグインを削除して、CSS対応で好きな場所で使えるようになります。

高品質なモリサワフォントは使いたい、だけどプラグインの数は減らしたい、という場合は、ぜひもうひとつの方法をお試しあれ。

エックスサーバー：Webフォントの使い方は2種類ある

エックスサーバーのWebフォント機能を使うには、エックスサーバーのサーバーパネルにログインし、「Webフォント設定」を追加しておく必要があります。

【Webフォント機能の利用条件】

専用のプラグイン「TypeSquare Webfonts for エックスサーバー」を使って設定するだけで、簡単にWebフォントを適用できます。

タイトル、リード、本文、太字の4か所に、それぞれ使用するフォントを選択してひとつのテーマを作り、テーマに合わせてサイト内で適用されます。

テーマはもともと用意されているものと、オリジナルのテーマを作ることができます。

サイトの雰囲気に合わせたフォントを最初に決めておくため、記事の編集作業ではフォントのことを気にせず作業ができる手軽さがあります。

上級者向けにカスタマイズできるようになってはいますが、自由度は低いです。

※ 今回の記事は次の「HTML記述形式」で使う方法をメインにしているため、プラグインの使い方は割愛します。

HTMLに記述する方法を使えば、サイト内で自由に設定が可能になります。CSSで特別な見出しやボックスデザインに使って楽しめます。

HTMLで使う方法

HTMLで使うには、最初に準備が必要です。

もしも先にプラグイン「TypeSquare Webfonts for エックスサーバー」を導入している場合は、無効化しておきます。

HEADタグ(<head>～</head>)内の、</head>タグの直前に次のコードをコピーして貼り付けます。

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

ダッシュボード［Cocoon設定］→［アクセス解析・認証］→［ヘッド用コード］内に貼り付け。

設定前にバックアップを取るようにしてください。

最近では「パターン1」の方法でコードを貼り付けるのがメジャーになっているようです。

アクセス解析用のコードとゴチャ混ぜにしたくない場合など、何かしらの事情がある場合の選択肢として「パターン2」を覚えておくとよいと思います。

これで準備完了です。

あとは、CSSを使ってスタイルを設定します。

Webフォントを適用したいタグやクラスにfont-familyを使って指定します。

例えば…

<h1>Webフォントの使い方</h1>

h1{
    font-family: "シネマレター"; 
    background: #e0f2f1;
    padding: 6px 10px;
}

Webフォントはフォント本来の太さで表示する関係上、Bタグやfont-weightなどの太字設定は無効となります。
太字を適用したい場合は、太字にしたい範囲を別のタグで囲み、現在のフォントよりも太いWebフォントを適用します。

<p>Webフォントは<b>美しい！</b></p>

p{ font-family: "新ゴ R"; }
b{ font-family: "新ゴ B"; }

指定できるフォントと、CSS指定用コードです。

日本語で指定する場合は””(ダブルクォート)で囲む必要があります。

/* 日本語で指定する場合 */
p{ font-family: "リュウミン R-KL"; }

/* 英語で指定する場合 */
p{ font-family: Ryumin Regular KL; }