【WhatFont】サイト上で使われているフォントを調べる拡張機能
この記事では、ウェブサイト上のフォントを調べられるChrome拡張機能「WhatFont（ワットフォント）」について書きます。
本拡張機能を導入して、フォントを調べたいサイトを開きます。拡張機能アイコンをクリックすると、マウス付近に、「Noto Sans」といったように、フォント名が書かれたツールチップが表示されます。
クリックすると、より詳細なポップアップを展開します。そのフォントに適用されているCSSの属性値（プロパティ）も確認できます。ファミリー、スタイル、太さ、サイズ、Line Height、Colorなどです。
テキストはコピーできるので、Google検索してもっと調べたい場合もらくちんです。「このサイトのフォント、オシャレだなぁ。調べて、参考にしたいなぁ」という場合に役立ちます。難しい知識なく、調べられます。
リリース元：Chengyin Liu（Twitterはこちら、GitHubはこちら）
記事執筆時のバージョン：2.1.0（2017年5月6日）
インストール方法
Chromeウェブストアからインストールできます。
https://chromewebstore.google.com/detail/whatfont/jabopobgcp...Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。
https://addons.mozilla.org/ja/firefox/addon/zjm-whatfont/「Firefoxへ追加」をクリックします。
「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニュー内に、拡張機能ボタンが追加されればOKです。
使い方
フォントを調べる（検出モード）
フォントを調べたいサイトを開きます。試しに、当サイトで見てみます。拡張機能メニューから、「WhatFont」アイコンをクリックします。頻繁に利用する方は、ピン留めアイコンをクリックして、直接ツールバーに配置するといいかなと思います。
検出モードになり、マウスカーソルの下にフォント名が書かれたツールチップが表示されるようになります。当サイトの場合、「Noto Sans」になっていました。この間は、リンクをクリックしても詳細ポップアップが表示されるだけで、移動はできなくなります。
フォントや属性値を調べられる詳細ポップアップを表示する
検出モードにした状態で、調べたいフォントを左クリックします。ツールチップが展開して、詳細なポップアップが表示されます。フォント、ファミリー、スタイル、太さ、サイズ、Line Height、Colorなどを確認できます。
当サイトの場合、以下のように表示されました。合っています。
| 「WhatFont」拡張機能で当サイトを調べた結果 | |
|---|---|
| フォント | Noto Sans – 400 |
| フォントファミリー | “Noto Sans", “Kosugi Maru", sans-serif; |
| フォントスタイル | normal |
| 太さ | 400 |
| サイズ | 16px |
| Line Height | 32px |
| Color | #333333 |
ポップアップ内のテキストは、マウスで範囲選択できます。そのまま右クリック→コピー、あるいはCtrl+Cでクリップボードに保存できます。
検出モードを終了する
検出モードにしている間は、ウェブサイトの右上に「Exit WhatFont」ボタンが表示されます。クリックすると検出モードが終了します。
あるいは、キーボードのEscキー（左上にあると思います）を押すことでも、解除できます。解除しないと、ずっとフォントのポップアップが表示されて、リンク移動もできないので、調べ終わったら、終了しましょう。
そのタブを「×」や、Ctrl+Wで閉じてもOKです。
当サイト以外のブログで見てみたスクリーンショット
当サイト以外のブログで調べてみたスクリーンショットを貼っておきます。開発者ツールなどから調べなくても、サクッと本拡張機能を使うことで、調べられます。
設定
右上の拡張機能アイコンを右クリック→「オプション」をクリックします。
ツールバーのアイコンを変更できます。ただの見栄え変更で、機能自体には影響しません。
僕が使っているダークテーマだと、標準のアイコンと色が同化して見にくかったです。もう一方のアイコンにすると、白いアイコンになり、ツールバーの背景と差別化できて、見やすくなりました。
WordPressのテーマを調べたい場合
以下の記事を参考にしてみてください。拡張機能を使うことで調べられます。
https://www.naporitansushi.com/wordpress-theme-detector/拡張機能を導入したくない場合は、ウェブサービスを活用する方法もあります。
広告、アナリティクス、CMSなど全体の技術を調べたい場合
「WhatRuns（ワットランズ）」というChrome拡張機能を利用することで、どのWordPressテーマ、プラグイン、アナリティクス、広告を利用しているかなどの全体の技術情報を確認できます。
詳しくは、下記記事を参考にしてみてください。
感想
以上、ウェブサイト上のフォントを調べられるChrome拡張機能「WhatFont（ワットフォント）」についてでした。
