サイブリッジラボでタグ「書体」が付けられている記事一覧

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

かのう | 2010年1月 5日 18:10
かのうです。
新年明けましておめでとうございます。本年もどうぞよろしくお願いいたします。

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

TypeKitとは？

Typekit.png @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_pricing.png
TypeKitの右上「Register 」をクリックして、使用するプランを選択する。プラン名下の「Sign up」をクリックし、アカウント登録と使用するサイト登録を行って下さい。

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

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

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

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


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

|

タグ: