littlepad blog

Fonts.com Web Fonts

昨日のエントリーで Google Font API を試した旨を書いたのですが、
Linotype、Monotype などの有名書体が参加しているサービス
「Fonts.com Web Fonts」が現在試験運用中で無料利用できるようなので試してみました。

http://webfonts.fonts.com/

本稼動した際は有償サービスとなるかもしれませんが、
とりあえず DIN が使いたかったのでお試しでやっています。

利用するにはトップページからサインアップします。
登録申請してから1日ぐらいで ID とパスワードが明記されたメールが届きます。
ログイン後、「Creat Project」というタイトルのページが表示され、
上記に表示されているタブを左から順番に登録していきます。

■Project
フォントの管理はプロジェクトごとに行います。
新規のプロジェクト名と利用するドメインを登録し、
[Save Project] をクリックします。

■Choose fonts
利用するフォントを選択します。
ちなみに自分は迷わず「DIN Next Regular」を選択しました!

■Work on style sheet
“Selectors” というフィールドにフォントを設定したいセレクターや
ID、クラスなどを設定し [Add selector] をクリックします。
下部にプルダウンが表示されるので、設定したセレクターに対してフォントを指定します。
[Save changes and update style sheet] をクリックします。

■Publish
JS ファイルが発行されるので、これを BODY タグの直後にペーストで完了。

ちゃんと設定できていれば、指定箇所にフォントが適用されます。
このブログではタイトル部分と、サイドバーの小見出しに
「DIN Next Regular」を適用させています。

モバイルバージョンを終了