2011.1.13 Thursday - 12:32

Soma FontFriend — Webフォント (Webfonts) の検証に便利なブックマークレット

キーワード

Soma FontFriendは、今盛り上がりを見せているWebフォント (Webfonts) の表示確認に便利なブックマークレットです。
※ブックマークレット (Bookmarklet)とは、ブラウザのお気に入りに入れて使うことのできるJavascriptです。※詳しくはブックマークレット (Wikipedia) をどうぞ。

何がともあれまずは使ってみましょう。

Soma FontFriendのページにアクセスし、[FontFriend] のリンクをブラウザのツールバーやお気に入りにドラッグして登録しておきます。なお対応ブラウザはFirefoxとSafariの最新版のみです。

次に用意されているデモページにアクセスし、先ほど登録したブックマークレットを適用してみましょう。すると左下に何やらパネルが出てきます。

Font Family:の STOCK からGeorgiaを選んでみます。するとデモページで使われていたデフォルトフォントが、Georgiaに変わりました。他にもIDやクラスによる指定、行間、サイズ、ウェイト等々、細かな設定で試すことができます。
もちろんデモページだけではなく、どんなサイトにも適用できます。

さらにすごいのは、ローカル上の手持ちフォントを@font-faceの下にあるエリアにドラッグ＆ドロップすれば、そのフォントが適用されること。対応しているのはTTF、OTF、SVG、WOFF形式のみ。試しに手持ちのHirukoというフォントを適用してみました。お見事です。

このFontFriendを使えば、小さいサイズや黒背景でしっかりテキストが読めるかどうか、また紙媒体で使っているフォントが、ブラウザ上ではどのような見え方をするのかなど、Webフォント (Webfonts) を導入する際の検証に便利です。

ただしデスクトップ用フォントは、使用許諾上Webフォント (Webfonts) としての利用が認められない場合がほとんどですので、サーバにフォントデータをアップしないように注意してください。実際に使いたい場合は、Webフォントサービスを利用しましょう。

Soma FontFriend
http://somadesign.ca/projects/fontfriend/

Soma Design
http://somadesign.ca/

PAGE TOP