ブログやWEBサイトを見ていると「このフォントかっこいいな」とか「何のフォントを使っているのかな」と疑問に思うことってありますよね。
対象となるページを右クリックして「検証」をすればページソースを見ることができ、使用しているフォントを特定することができます。
しかし、
- ちょっとだけ手間がかかる
- 画像内に使われている文字のフォントがわからない
という問題点があるのも事実。そこでもっとお手軽で便利なツールがないかと探していた時に出会ったのが、Chromeの拡張機能である「Fontface Ninja」というツールです。
このツールを使えば、サイト内の気になる個所にカーソルを合わせるだけで使用しているフォントを特定することができます。
拡張機能「Fontface Ninja」をインストールしよう！
まずChromeウェブストアを開き「Fontface Ninja」を検索します。
Chrome以外のブラウザでは拡張機能を使えないため、Safariなど他のブラウザを使っている場合はChromeを使うようにしましょう。
「Chromeに追加」をクリックすると確認のポップアップが出るので「拡張機能を追加」をクリックします。
次のように表示されたらFontface NinjaのChromeへの追加は完了です。
続いてはFontface Ninjaを使って気になるサイトのフォントを実際に調べていきましょう。
「Fontface Ninja」を使って気になるサイトのフォントを調べよう！
使い方はとても簡単です。（しかもあっという間…！）
サイト内の文字フォントを調べる方法と、画像内の文字フォントを調べる方法の2パターンを紹介いたします。
サイト内の文字フォントを調べる方法
まず使用フォントを確認したいサイトを開いたら、Chromeのツールバーから拡張機能をチェックします。。Chrome拡張機能の追加画面でも表示された黒い忍者が跳んでいるアイコンをクリックしましょう。
その次は、実際にフォントを調べたい文字にマウスカーソルを合わせます。すると、使われているフォントや文字色、文字サイズ、文字の高さと行間幅の情報が表示されます。
また画面右上には、ページ上で使われているフォントの一覧が表示されます。
既にダウンロード済のフォントは「Infos」と表示され、クリックするとGoogleの検索結果画面に飛びます。持っていないフォントは無料でダウンロードできる場合は「Free」と、有料のフォントの場合は「Buy」と表示されますが、クリックするとそれぞれダウンロードページ、販売ページに飛びます。
必要な場合はダウンロード（あるいは購入）しましょう。
サイト内の画像に使われてる文字フォントを調べる方法
画像内のフォントを調べたい場合は、まず先ほどの流れと同様に拡張機能よりFontface Ninjaを選択します。
フォントを調べたい画像の上にマウスカーソルを合わせると、このように薄緑色のアイコンが表示されます。
そのまま画像をクリックすると、10数秒の解析時間がスタートします。「WhatTheFont」と連携して画像を解析してくれます。
解析が終了後、画像内の文字の部分にマウスカーソルを合わせると、使用しているフォントが表示されます。（文字色やフォントサイズは表示されません）
点線で囲まれた部分は画像の中で使われている文字ですが、このようにズバッとフォントを示してくれます。企業の公式サイトやアーティストのホームページを参考にしたい時に非常に便利です。
また画面右上には先ほど同様に画像内で使われているフォントが一覧で表示されます。ダウンロードや購入が必要な時はこちらからリンクをたどると便利ですね！
FontFace Ninjaを使えば、他のサイトで使われているフォントがすぐに判明します。
フォントの使い方次第でサイトのイメージも大きく変わるので、自分のブログを「憧れのあのサイト」のように洗練されたものにするためにも、ぜひ参考にしてみてください。それでは！
