はじめに
Web サイトに使われているフォントが気になることありませんか?僕はあります。そんな時に何のフォントが使われているか調べる方法です。
Fonts Ninja
今回は Chrome 拡張機能である Fonts Ninja を使用します。
これは今回ように Web サイトに使われている Web フォントを知りたい時に活用できます。
機能はフォント・タイポグラフィ情報の取得と試し打ちの2つあります。
情報の取得
拡張機能をインストールし、追加されたアイコンをクリックすると、そのページで使われているフォントが一覧で表示されます。
さらに、マウスを特定の文字列にもっていくと、その箇所で使われているフォントやサイズ、色、行間などタイポグラフィ情報が表示されます。
試し打ち
取得した Web フォントを試し打ち(試し書き)することもできます。
表示された、フォント一覧の部分をクリックすると、そのまま文字をタイプすることができます。
欠点
この Fonts Ninja を使っても、全てのフォントが正確に表示されるわけではないようです。
CSS 以外からも情報を取ってきているようですが、限界があります。あくまで参考程度に使うと良いのかもしれません。
おわりに
海外の企業のサイトとかだと、オリジナルの書体とか作っていて見るのも楽しいですね。日本でもこれぐらい自由になれば楽しいのに。