blog.hakozu.me

モリサワのクラウドフォントサービス TypeSquare を試す

モリサワ クラウドフォントサービス TypeSquare UD 新ゴ R スクリーンショット

本日 2012 年 2 月 22 日 (猫の日等々)、モリサワのクラウドフォントサービス TypeSquare がサービスを開始したので早速試しました。

12 月 31 日までは「オープン記念 ¥0 キャンペーン」期間となり、PV の上限なく無料にて利用が可能になっています。
正式入会は 12 月 1 日からとなり、キャンペーン期間終了日まで申込みがない場合は退会となります。
利用者が集中することで、何らかの不具合が発生することを想定してのキャンペーン期間でしょうか。

追記 (2012.02.25)

確認はしていませんが、Windows での表示、17 px 以下に問題がある様ですね。

モリサワ TypeSquare を比較してみる

1. 利用申込み

ページ右側にある [ご利用申込み] より手続きを開始します。
7 つのプランが用意されていますので、最上部の「オープン記念 ¥0 キャンペーン」を選択し [次へ] をクリックします。
ご利用申込み [利用規約] への同意、ご利用申込み [基本情報入力] に必要事項を入力し終了になります。

2. サイト登録

メールにて利用申込み完了のお知らせが届きますので、ログイン後、左側にある [サイト登録・PV 数レポート] をクリックします。
利用するウェブサイトの URL を入力します。当サイトであれば「http://blog.hakozu.me/」となります。
複数のウェブサイトの追加が可能です。

3. JavaScript と CSS の記述

[導入方法] の Step 2 にある TypeSquare 専用タグをコピーし <head></head> 内に記述をします。
WordPress をご使用であれば、header.php 内に記述をすることでほぼすべての記事、ページにて利用可能になります。
次に [フォント一覧] より利用するフォントを検索します。
デザイナーの方にはなじみの深いフォントばかりですので、それほど手間は必要ないかと思います。
CSS ファイルのフォントを適用したい箇所に以下の様に font-family を追記します。
現状では中心のコンテンツ <hx> 部分に UD 新ゴ R を適用しています。

h2, h3, h4, h5 {font-family: UD Shin Go Regular;}

上記作業後、ページを再読込します。
すべての読み込み完了後にフォントの変更がされていることを確認します。

各 OS、各ブラウザーでの表示が細部まで同じになるものではありませんが、繊細な読み物等に表現力が加味されることは確かでしょう。
表示がすべて同じでないと嫌というクライアントへの提案も可能ですね (先日、そういった話がありました)
ただ、ウェブデザイナーとしてはデザイン案の段階では TypeSquare に用意されているフォントが使用可能なことが前提となることもあるでしょうから、モリサワのフォントをあまりお持ちでない方は、MORISAWA PASSPORT の導入も検討しなくてはならないかもしれません。

今回 <hx> 部分のみへの導入なので表示速度への影響等問題点は分かりませんが、今後は本文全体に適用した場合等も試そうと考えています。

追記 (2012.03.21)

1 カ月間の利用で表示のされ方やそれほど表示速度に影響がないことが分かりましたので、適用を解除しました。

関連しそうな商品

関連しそうな記事

コメント