ホーム WEBデザイン モリサワのWEBフォントがXSERVERの全プラン無料で利用できるようになったので早速設定してみた!
WEBデザイン 3,376
Morisawa, WEB, 書体, WordPress, レンタルサーバー, デザイン, Design, Font, フォント, WEB Font, WEBフォント, モリサワ
モリサワのWEBフォントがXSERVERの全プラン無料で利用できるようになったので早速設定してみた!
6月22日より、エックスサーバーの全プランにて、ついにモリサワのWEBフォントが無料で利用できるようになった!
プリンタサーバーにPSフォントをインストールしていたDTP世代の人間なので(笑)、「モリサワ」の書体がただで使えるとなればこれはありがたい。
今まで「游ゴシック」をメインで使っていたが、これを機会にモリサワにしよう。
現在27書体が利用可能。
- リュウミン R-KL
- リュウミン B-KL
- 黎ミン M
- A1明朝
- 新ゴ R
- 新ゴ B
- ゴシックMB101 B
- 見出しゴMB31
- じゅん 201
- じゅん 501
- 丸フォーク M
- フォーク M
- シネマレター
- はるひ学園
- G2サンセリフ-B
- 那欽
- 竹 B
- 新ゴ シャドウ
- ぶらっしゅ
- トーキング
- 教科書ICA M
- 陸隷
- TB古印体
- TBUDゴシック R
- TBUDゴシック E
- UD新ゴ コンデンス90 L
- UD新ゴ コンデンス90 M
むむむー。。。。
ゴシック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」組み合わせはなかなかだと思いました。
今後気分で変わるかもしれませんが、このページを書いていて変更した時が上記の写真で、
- 「新ゴ B」=「Roboto Black 900」
- 「新ゴ R」=「Roboto Regular 400」
で組み合わせています。
因みに「今後気分で変わるかもしれません」と言っているのは、やはりというか予想通りですが、今までより読み込みに時間がかかります。ですが、WEB上で「新ゴ B」と「新ゴ R」で構成されたページはかなりのインパクトがありますね。重たいのが気になりましたが、ちょっとこれで様子をみます。
というか、なんで「新ゴ L」がないのだ!!
スポンサーリンク
Twitter でbbpをフォローしよう!
Follow @https_bbp_jpこんな記事もあります。
コメント
プロフィール
bbb
はWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。