TypeKitで文字の表現が変わる!!フォント・クラウドの時代Design

かのうです。
新年明けましておめでとうございます。本年もどうぞよろしくお願いいたします。

先々々週の ハシモト さんの記事で少しふれていた「TypeKit」について、使用方法とサンプルについて記載したいと思います。

TypeKitとは？

@font-faceを簡単に利用することが出来るサービスです。 @font-faceとは、使用するフォントの名前、そのフォントデータのURI、そしてその使用条件を記述することでフォントデータを指定する際に用いられるCSSです。 TypeKitを使えば"ユーザ側が持っていないフォント"でも画像を使わずに表現することが可能なのです。TypeKitは@font-faceに対応したブラウザ （Firefox 3.5、Safari 3 、IEも） であれば表示できます。日本語も対応すれば非常に表現の幅が広がりますね！

TypeKitのフォントサンプル

・Continuo Web

ABCDEFG HIJKLMN OPQRSTU VWXYZ

・Scrivano

ABCDEFG HIJKLMN OPQRSTU VWXYZ

などなど、トライアル版でもフォントはもっとたくさんあります。
ただトライアルで使用できるサイトは1つ、フォントは2つまでです。

TypeKitの使用方法

1. アカウント登録

TypeKitの右上「Register 」をクリックして、使用するプランを選択する。プラン名下の「Sign up」をクリックし、アカウント登録と使用するサイト登録を行って下さい。

2. JavaScript の埋め込み

登録後表示された JavaScript コードを登録したサイトの head 要素内で読み込みます。管理画面 （Kit Editor） のヘッダにある 「Embed Code」 からも取得できます。

3. フォントを選択

「Browse by Style」のフォントカテゴリかALLを選択し、フォント一覧から使用したいものは「Add」をクリックします。後ほど変更可能です。

4. CSSを指定する

管理画面にフォントを追加したら、右側の「Selectors」部分で、class 名（.example）や id 名（#example）、要素名（span）を登録して、あとはサイト内で指定するだけ！設定を変更したら、左下にある 「Publish」 ボタンを押して下さい。もちろんデフォルトで設定してあるclass名をそのまま使用してもOKです。 「Advanced..」 をクリックするとcssのサンプルも明記されているので、それを使用しても大丈夫です

以上、まだ試してない方はぜひー


余談ですが、2010年は寅年ということでtwitterのシカータくんもトラ仕様ですので、ぜひ見てねっ　http://twitter.com/shicata