モリサワのWeb Fonts「TypeSquare」がサービス開始

この記事は鷹野雅弘によって執筆されました。

公開日：2012年2月22日、更新日：2012年2月24日

モリサワのWeb Fonts「TypeSquare」が本日からサービス開始しています。Web Fontsと呼ばず、クラウドフォントと呼ばれています。

DTP Transitでも、見出し部分に適用してみました。雑感として、気づいたことをメモ。

一旦デバイスフォントで表示された後に、ぱっと切り替わる。予想していたよりずっと早いけど、あれ？と思うかも。
現在、自動カーニングはできません。なので「新ゴ」とか、パラパラしない文字が適しているかも
Web Fontsが表示されている状態でテキストを選択できます。つまり、画像が減ります。
デスクトップだと本文に適用するのは、ちょっとつらい。明朝などを使った場合には逆に読みにくい。一方、iPhone 4/4SのRetinaディスプレイだと解像度が高い（326ppi）ため、いい感じ。

サービスの開始を記念して、TypeSquareを無料でお好きなだけお使いいただける「オープン記念￥0キャンペーン」を行います。ぜひこの機会にTypeSquareをご利用ください。

ご参考：

実装は非常に簡単で、次の2ステップで完了です。

header要素内に次のようにJavaScriptを挿入する

<script type="text/javascript" src="https://typesquare.com/accessor/script/typesquare.js?oCDPlT8xxxxxxxxxx" charset="utf-8"></script>

クラウドフォントを適用させたい対象に対して、フォント名を指定する。

h2.asset-name, h1.asset-name {
    line-height: 1.4;
    font-family: "Soft Gothic Bold";
    font-weight: normal;
}

デフォルトでは見出しには「font-weight: bold;」が適用されているため、「font-weight: normal;」を指定しないと太ってしまいます。逆に、クラウドフォントが適用されない環境では太らなくなってしまいます。