Webサイトを作る際に他のサイトを参考にすることがよくあるんですが、最近はWebフォントを採用しているところが多いので「このフォントなんて名前だ…？」って事が頻繁に起きるようになりました。

今までは開発者ツールを使って文字に当たっているフォントを調べていたんですが、これが地味にめんどくさいので何か良い方法とかないかな～と探してみたところ、ちょうどいいChrome拡張機能を見つけたので紹介します。

WhatFont

『WhatFont』は、Webサイト上で使われているフォントを簡単に調べることができるChrome拡張機能です。

上記リンク先の右上にある「Chromeに追加」を押すと「WhatFontを追加しますか？」というダイアログが表示されるので「拡張機能を追加」を押しましょう。これで拡張機能の追加は完了です。

使い方

まず、Chrome右上のWhatFontアイコンをクリック（表示されてない人は拡張機能アイコンからWhatFontをピン留めしてね）。

するとフォントの調査モードになるので、気になるフォントの上にマウスカーソルを動かしてみましょう。試しに自分のブログで見てみると…

こんな感じで、当ブログの記事一覧のタイトルに使われているのは「Noto Sans JP」っていうのが分かりましたね。

ちなみにこの状態でクリックすると、フォント名以外にも色々な情報が表示されます。

• フォント名
• font-family
• font-style
• font-weight
• font-size
• line-height
• color
• サンプル文字

以上の情報が表示されます。ここまで表示してくれるのにletter-spacingだけ無いのは不思議ですが、まぁこれだけでも十分ですね。

フォントの調査モードを終了するときは、画面右上の「Exit WhatFont」をクリックしましょう。

Chrome以外のブラウザで使う方法

実はChrome拡張機能を使わなくてもWhatFontを使う方法があります。まずは公式サイトにGo！

なんと公式サイトでWhatFontのブックマークレット版が配布されています。

このボタンをブックマークバーにドラッグ&ドロップするか、右クリックからブックマークに追加しましょう。あとはその追加したブックマークをクリックするだけで、Chrome拡張機能と同じ機能が他のブラウザでも使えます（Firefoxで動くのは確認済み）。

以上。