はじめに

Web サイトに使われているフォントが気になることありませんか?僕はあります。そんな時に何のフォントが使われているか調べる方法です。

Fonts Ninja

今回は Chrome 拡張機能である Fonts Ninja を使用します。

これは今回ように Web サイトに使われている Web フォントを知りたい時に活用できます。

機能はフォント・タイポグラフィ情報の取得と試し打ちの2つあります。

情報の取得

拡張機能をインストールし、追加されたアイコンをクリックすると、そのページで使われているフォントが一覧で表示されます。

さらに、マウスを特定の文字列にもっていくと、その箇所で使われているフォントやサイズ、色、行間などタイポグラフィ情報が表示されます。

試し打ち

取得した Web フォントを試し打ち(試し書き)することもできます。

表示された、フォント一覧の部分をクリックすると、そのまま文字をタイプすることができます。

欠点

この Fonts Ninja を使っても、全てのフォントが正確に表示されるわけではないようです。

CSS 以外からも情報を取ってきているようですが、限界があります。あくまで参考程度に使うと良いのかもしれません。

おわりに

海外の企業のサイトとかだと、オリジナルの書体とか作っていて見るのも楽しいですね。日本でもこれぐらい自由になれば楽しいのに。