Chrome拡張機能「Fontface Ninja」で、素敵サイトの使用フォントが丸わかり!

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年11月10日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

素敵なウェブサイトを見ていると、「このフォントかっこいいな」「なんていうフォントだろう」と気になることありますよね。

スタイルシートを見れば分かるといえばそうなんですが、どの要素にどのフォントが使われているか、というのを確認するのはなかなか面倒です。

Fontface Ninja」は、サイトで使われているフォントにカーソルを置くだけで確認でき、しかも購入・ダウンロードまでできてしまうという拡張機能なんです!

拡張機能のインストール

  1. Chromeウェブストアで「Fontface Ninja」を検索し、「CHROMEに追加」をクリック。
    CHROMEに追加
  2. 確認メッセージが表示されるので「拡張機能を追加」をクリック。
    拡張機能を追加
  3. 「Fontface Ninja」がChromeに追加されました。
    Chromeに追加されました

使い方

好きなウェブサイトを開いた状態で、ツールバーのニンジャのアイコンをクリックします。

ツールバー

すると、そのサイトで使用されているフォントがポップアップで表示されます。

ポップアップ

ブラウザ上でフォントをマウスオーバーすると、個々のフォントの「文字サイズ」「文字の間隔」「行の高さ」「色」が分かります。

スタイル1

スタイル2

スタイル3

ポップアップの右側に表示されているのは、そのフォントの金額です。

フォントの金額

「Free」となっている場合は無料で、クリックするとフォントが直接ダウンロードできちゃいます。便利!
有料の場合は販売サイトにジャンプします。

フォント購入

フォントを探していると、あまりの種類の多さに何が良いのか分からなくなってきたりします。
でもこんなふうに実際にサイトで使われているフォントを見ればイメージも湧きやすいし、導入する時の参考にもなります。

どんなフォントがトレンドなのか、なんてことも把握しやすそうですし、かなりオススメです!

ちなみに、Firefoxのアドオンにも対応していますよ~。