navigationめがねをかけるんだProfilepostTypeSquareのクラウドフォント2013-05-09postTypeSquareのクラウドフォントモリサワ社が提供しているクラウドフォントを導入しました。今、皆さんが見ているこの文字は、クラウドフォントが出力した字体です。クラウドフォントを導入するきっかけは会社のサイト。I/Oの前に思い切って更新することにしました。新しいサイトのデザインは、標準テンプレートのデザインほぼそのままで、内容も最小限です。あまりにも貧相なので、何か出来ないものかと考えていたところに、TypeSquareがクラウドフォント0円キャンペーンをしていたので、渡りに船とばかりに申し込んだというわけです。このクラウドフォント、今回初めて導入してみたのですが、想像以上に簡単だったので、利用手順を紹介します。面白そうと思ったら是非使ってみて下さい。クラウドフォントの利用方法クラウドフォントは、次の4つのステップで利用します。利用するウェブサイトのURLを登録Scriptタグの埋め込みCSSでフォントを指定ユーザー登録クラウドフォントを利用するために、まずはユーザー登録をします。登録は、個人または法人を選択できます。登録内容を送信すると、メールアドレス宛に確認のメールが届き、そこに記載されているアドレスにアクセスすると登録完了です。以後、入力したメールアドレスとパスワードで、TypeSquareにログインします。利用するウェブサイトのURLを登録フォントを利用するウェブサイトのURLを登録します。ウェブサイト毎にページビューが計測されていて、現在は全て無料ですが、正式入会後(正式入会の受付は、2013年12月開始予定)は、一定のページビューを超えるとお金がかかったりするようです。Scriptタグの埋め込み「導入方法」のページを開いて、表示されるScriptタグを、登録したウェブサイトのheadに埋め込みます。参照するスクリプトは、ユーザー毎に異なります。CSSでフォントを指定ページのCSSに、適用したいフォント名を指定します。UDTypos58;}これだけで、指定した部分にクラウドフォント(この場合は’UDタイポス’)を適用できます。使ってみた感想これまでのウェブデザインでは、表示するフォントは受け手側に依存していました。してもフォントを固定したい場合は、画像にしたりといろいろと手間がかかった訳ですが、クラウドフォントを使うと、そのような心配は無くなります。気になる本サービス開始後の価格も、120万(1年間)PVまでは¥16,800。月に1000PVを超えなければ無料と、モリサワ社の販売しているフォントセットと比べると、驚くほど低廉な価格だと思います。現時点ではTypeSquareのサイトが重いのが気になります。ページの切り替えの度に大体1秒程度、特に、フォントの検索と一覧表示で、検索ボタンを押してから数秒待たされることもあります。言えば、クラウドフォントの表示が遅いと言うことは無いので、この技術がビジネスになり、サーバーリソースの割り振りが増えれば、簡単に改善できるでしょう。使ってみたクラウドフォント。これまでの不便を一気に解決すると言う意味で、とても大きな可能性を感じました。