よたかの日記を兼ねたブログです
あっちこっちケイイチ

よたかの日記を兼ねたブログです

  1. サーバーライフ
  2. 今度は『TypeSquare』のWebFont使ってみました

今度は『TypeSquare』のWebFont使ってみました

よたか2016.07.19 22:32:54

さくらインターネットのレンタルサーバーは、追加料金ナシでモリサワのWebフォントが使えるようになったらしい。
ずっと『新丸ゴR』を本文に使いたいと思っていたので、かなり羨ましい。

ちなみに、モリサワの新ゴシリーズは、カタカナが少しデカいけど、欧文や数字とのバランスがいいんですよ。
なによりも漢字がしっかり読めるのがいいですよね。

そこで『モリサワ』のWebフォントサービス『TypeSquare』を見てみた。

おぉ、なんと『無料プラン』があります。1書体1サイト、1万ページビューまで使えるみたいなのでさっそく設定してみる事にしました。

まずメニュー右上部の『新規登録(無料)』クリックして登録します。
有料前提のサービスなので、住所や業種まで入力しないといけません。
具体的な導入方法はこちらのページに記載されていますのでご確認ください。

私は最初から『新丸ゴ R』だと決めていたんですけど、通常はフォント一覧から使えそうな書体を選ぶのも楽しそうです。

1書体だけなら、本文用を選ぶのが普通だと思います。
私が選んだ『新丸ゴ』の他に、無難な『中ゴ』、スッキリした印象の『新ゴ』、少しクセのある『ナウ-GM』、ちょっと『こぶりなゴシック』も興味のあります。

本気でCSSをいじるなら『UD新ゴ コンデンス90 L』とか選んで、letter-spacing:0.1em;とかするのもお洒落かもしれない。

気合い入れてJavaScriptをいじるなら『ヒラギノ角ゴ』を選んで、Macならダウンロードさせずに、節約するのもいいかもしれません。

せっかくなので、UD(ユニバーサルデザイン)フォントを選ぶのもいいでしょうし、縦書きにする時は、明朝や楷書もアリでしょう。


ところで、Webフォントはダウンロードに時間がかかるので表示が一瞬遅れるのですけど、TypeSquareは他のサーバーに比べて速い方だと思うし、フェードインさせて誤摩化す機能がついている。
さすがです。

それに設定方法は極めて簡単。ヘッダーにjavascriptを追加して、cssに設定しちゃえばOKです。このブログは1書体しか使わないので、こんな感じにhtmlに直接指定しました。

html {
font-family: "Shin Maru Go Regular", -apple-system, "Lucida Grande", "Hiragino Kaku Gothic ProN", "メイリオ", "meiryo", sans-serif;
}

クライアント向けに提供する場合は、メニューやタイトルなど細かい設定が必要だと思うので、『MORISAWA PASSPORTプラン』が丁度いいのかも。
ちゃんと規約を読んでいないけど、1,000円/月、10,000円/年くらいかな。
それに『MORISAWA PASSPORTプラン』なら、APIも使えるので名刺の作成プラグインとかも作れそうですね。