モリサワのWEBフォントがXSERVERの全プラン無料で利用できるようになったので早速設定してみた！

6月22日より、エックスサーバーの全プランにて、ついにモリサワのWEBフォントが無料で利用できるようになった！

プリンタサーバーにPSフォントをインストールしていたDTP世代の人間なので（笑）、「モリサワ」の書体がただで使えるとなればこれはありがたい。

XSERVERのWEBフォントのページ 

今まで「游ゴシック」をメインで使っていたが、これを機会にモリサワにしよう。

現在27書体が利用可能。

むむむー。。。。
ゴシックMB101 Bがあるのがありがたいが、なんと中ゴBBBがないじゃないか！！！！！
一番期待した普通のゴシックがないのか。。。。

と思いきや、

みんなの推しフォント総選挙 

というので残りの3書体を投稿形式で選ぶそうだ。

「中ゴシックBBB」と「ナウ-GM」と「見出しミンMA31」が選ばれて欲しい。。。
「中ゴシックBBB」は絶対選ばれるはずだから「ナウ-GM」に投票しようかな。

で、この記事が上がっている時はすでに書体が変わっているわけですが、設定してみます。

設定はとても簡単。

なんだかエックスサーバー側でこのWEBフォント用にWordpressのプラグインも用意しているようだが、どう考えても直接CSSとhtmlに打ち込んだ方が早いしメンテナンスもしやすいです。

まずはサーバーパネルから「Webフォント設定」をクリック。

「Webフォント設置の追加」タブをクリック。

Webフォントを利用したいドメインを設定。

設定が完了されましたと表示されます。
次にWordpressのheader.phpを開いて下記Javascriptのソースを〜の中に入れる。

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

あとはCSSファイルに、変更したい部分のfont-familyを指定するだけです。

h1{
	font-family: "新ゴ B";
	}

表示結果。

上がWebフォント適用前の状態。
メインは「游ゴシック」で、欧文及び数字はGoogleのWebフォント「Roboto」を利用していました。

そして適用後、下のようになりました！

因みに、「ゴシックMB101 B」大好きなのですが「中ゴBBB」がないので、残念ですがタイトル周りは「新ゴ B」、本文周りは「新ゴ R」にしました。

紙のデザインをしている人はわかると思うのですが、タイトルは「新ゴ B」で指定しているので、残念ながら「」や（）はそのままでは「新ゴ B」の太いままです。紙やっていればここを意図的に細い書体に変えたい気分になるのですが、この「」や（）だけ細くしたいなら、かなりトリッキーな事やらないとダメですね（笑）

Webに組版の話を持ち込むのはまだ無理ですねw

また、これも紙のデザイン経験がある人は分かると思うのですが、Webフォントになっても相変わらず「新ゴ」の数字はダサいです。私は紙やる時で新ゴに合わせる数字は、よく「DIN」を使っていましたが、このモリサワのWebフォントの「新ゴ」とGoogleWebフォントの「Roboto」組み合わせはなかなかだと思いました。

今後気分で変わるかもしれませんが、このページを書いていて変更した時が上記の写真で、

で組み合わせています。

Google Fonts 「Roboto」 

因みに「今後気分で変わるかもしれません」と言っているのは、やはりというか予想通りですが、今までより読み込みに時間がかかります。ですが、WEB上で「新ゴ B」と「新ゴ R」で構成されたページはかなりのインパクトがありますね。重たいのが気になりましたが、ちょっとこれで様子をみます。
というか、なんで「新ゴ L」がないのだ！！

コメント

プロフィール

bbpはWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。