超美麗！無料で日本語のWebフォントが使えるエックスサーバーの新機能が凄すぎた！
WordPress
無料SSLサービスに引き続き、エックスサーバーがまたやってくれました！
なんと、あの有名な日本語Webフォントのモリサワフォントを無料でWebサイトに利用できるサービスを開始したのです！
やまかわということで、WordPressへのモリサワフォント導入方法を紹介したいと思います。
そもそもWebフォントとは？
Webフォントは、通常のテキストデータとは異なり、フォントファイルを読み込んで出力しています。
閲覧するデバイスや解像度の違いによって生じるジャギーなどの心配もなく、まるで画像加工ソフトで編集したようなとてもきれいな文字を表示させることが可能です。
モリサワフォントって？
モリサワフォントは、フォントといえばモリサワといわれる程有名な老舗のフォント制作会社で、1年契約のPASSPORT1でも49,800円する高額フォントでもあります。
趣味でイラストを書いたり動画の制作をしたり、購入さえすれば専門職の方だけではなく個人でも自由に使えるのが魅力です。
ガジェット系商品紹介でも有名なYouTuber瀬戸弘司さんは、実際に動画内で表示する字幕にモリサワフォントを使用されています。
エックスサーバーの日本語Webフォント導入の流れ
それでは、実際にWebフォントをサイトに設定してみます。
導入は以下の流れでおこないます。
- サーバー管理パネルで使用ドメインを設定する
- WordPressに専用プラグインをインストールする
- フォントの設定をする
サーバー管理パネルで使用ドメインを設定する
エックスサーバーのサーバー管理パネルに、新しく[Webフォント設定]というものが追加されているのでこちらをクリックします。
[Webフォント設定の追加]からドメインを選択。
Webフォントを設定できるドメインは1アカウントにつき1サイトのみで、1ヶ月に25,000PVを超えると強制的に標準のフォントに戻ります。
WordPressに専用プラグインをインストールする
WordPressのプラグイン ⇒ 新規追加から「TypeSquare Webfonts for エックスサーバー」を検索してインストールします。
フォントの設定をする
プラグインの設定ページから使いたいフォントテーマを選択します。
[新しいテーマを作成する]を選択すると、タグごとにフォントを変更することができます。
書体の見本は「書体見本一覧」をご参照ください。
ここまででサイトのフォントが変更されているかと思いますが、このサイトではなぜかうまく反映されませんでした。
Webフォントがうまく反映されない場合
Webフォントの設定方法として、プラグインを使うほかに直接CSSで指定するHTML記述形式があります。
私の場合、こちらの方法だと即反映されました。まずは簡単なプラグインを試してみて、それでダメなようならHTML記述形式で設定するといいかもしれません。
まず、ヘッダーのHEADタグ(<head></head>)の間に下記コードを追加します。
<script type="text/javascript" src="//webfonts.xserver.jp/js/xserver.js"></script>
Webフォントを反映させたいセレクタにfont-familyを指定します。
25,000PVを過ぎたら自動的に標準のフォントに切り替わるように、モリサワ以外のフォントも指定しておきましょう。
h1 {
font-family: "新ゴ R", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
}
各フォントのfont-familyについては「各WebフォントのCSS指定用コード」をご参照ください。
モリサワWebフォント表示例
このブログで実際にモリサワWebフォントに変更してみました。
こちらの例では本文テキストに「新ゴ R」を指定しています。
少し丸みを帯びており、「Noto Sans Japanese」に比べてしっかりくっきり表示される印象です。
サイトの雰囲気が一気に変わりますので、エックスサーバーをご利用の方はぜひ一度試してみてください。
追記：2017年8月8日
使えるWebフォントに「中ゴシックBBB」「すずむし」「新丸ゴ R」の3つが追加されました。
かわいい感じのフォントなので、女性向けブログにぴったりですね。
WordPressサイト運営に特化したお勧めサーバーTOP3
ブログは蓄積型の財産です。大事なデータ情報を守るためには信頼性の高いレンタルサーバー選びが大切です。
中でもエックスサーバーは、独自SSL無料提供を初め、高速・多機能・高安定。月額900円からと圧倒的コストパフォーマンスに優れ、初心者の方にも一番にお勧めしたいサーバーとなっています。
以下、エックスサーバー社が運営するWordPressサイト運営に特化したレンタルサーバーを紹介します。
