本日 2012 年 2 月 22 日 (猫の日等々)、モリサワのクラウドフォントサービス TypeSquare がサービスを開始したので早速試した。
12 月 31 日までは「オープン記念 ¥0 キャンペーン」期間となり、PV の上限なく無料にて利用が可能になっている。
正式入会は 12 月 1 日からとなり、キャンペーン期間終了日まで申込みがない場合は退会となる。
利用者が集中することで、何らかの不具合が発生することを想定してのキャンペーン期間だろうか。
追記 (2012.02.25)
確認はしていないが、Windows での表示、17 px 以下に問題がある模様。
1. 利用申込み
ページ右側にある [ご利用申込み] より手続きを開始する。
7 つのプランが用意されているので、最上部の「オープン記念 ¥0 キャンペーン」を選択し [次へ] をクリックする。
ご利用申込み [利用規約] への同意、ご利用申込み [基本情報入力] に必要事項を入力し終了。
2. サイト登録
メールにて利用申込み完了のお知らせが届くので、ログイン後、左側にある [サイト登録・PV 数レポート] をクリックする。
利用するウェブサイトの URL を入力する。当サイトであれば「https://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 カ月間の利用で表示のされ方やそれほど表示速度に影響がないことが分かったので、適用を解除した。
