【Find website used fonts】フォントを調べられる拡張機能

Chrome拡張機能

「Find website used fonts」のアイコン

この記事では、ウェブサイト上のフォントを調べられるChrome拡張機能「Find website used fonts」について書きます。

「Find website used fonts」のスクリーンショット

ウェブサイトが使っているフォントを、ワンクリックで調べられるChrome拡張機能です。

本拡張機能を導入して、フォントを調べたいサイトを開きます。拡張機能アイコンをクリックすると、そのページで使われているフォントが一覧表示されます。

ブロガーさんが、他の方のブログのフォントを確認したい時に便利です。

文字をピンポイントで指定して、フォントを調べる機能も搭載されています。これにより、拡張機能クリックだけで検出されなかったフォントも調べられます。

検出モードでは、フォント名(font-family)だけでなく、文字色、背景色、サイズ、行間、太さなどのCSS情報もチェックできます。検出した情報のコピペ機能はありません。真似したい時は、手動でスクショなり撮影するしかありません。

使ってみた感想としては、開発者ツール(F12)から確認する方法を知っている人は、そっちを使ったほうが、正確だなぁということです。本拡張機能は、あくまで調べる方法が分からない初心者さん向けかなと思いました。

Chrome拡張機能だけで、Firefoxアドオンはありません。ただし、類似アドオンがあります。

提供元:Rebekah Bailey
記事執筆時のバージョン:2.0.1(2022年8月30日)

インストール方法

Chromeウェブストアからインストールできます。

Firefoxをご利用の場合

本拡張機能は、Chrome拡張機能のみの提供で、Firefoxアドオンはリリースされていません。

Firefoxをご利用の方は、代わりに「What Font」などで代用できるかと思います。

「Chromeに追加」をクリックします。

Find website used fonts - Chrome ウェブストア

拡張機能のオーバーフローメニュー内に、拡張機能ボタンが追加されればOKです。このボタンを利用するので、頻繁に使う方は、ピン留めしておくといいかもしれません。

インストールした拡張機能のポップアップメニュー画面

使い方

フォントを調べたいサイトにアクセスします。開いたら、インストールしたFind website used fontsの拡張機能ボタンをクリックします。

ポップアップが表示されて、使っているフォントが一覧表示されます。アイコンの右下にある数字は、そのサイトで使われているフォントの数です。

「Find website used fonts」のスクリーンショット2

フォント名の横にあるサーチボタンをクリックすると、そのフォントの情報を、「FontSpace」ページで表示します。データベースにないフォントは表示されません。

日本語フォントはないのかなといった印象でした。海外のフォントだと、使えるのだろうか。

検出モード

「Enable Inspect Fonts」をクリックすると、検出モードになります。調べたい文字の上にマウスを乗せると、ポップアップで情報が表示されます。その文字にかかっているCSSが表示されます。

「Find website used fonts」のスクリーンショット3

ポップアップは、マウスの動きに追従していて、範囲選択できません。フォント名やCSSをコピペできたら、もっと使えるのかなぁ?と思いました。

けいたろー通信」さんのブログでは、「メイリオ(Meiryo)」を使っているということが分かりました。

検証モードをやめたい時は、「Enable Inspect Fonts」をオフにします。

余談

上記の方のブログを開発者ツールで確認すると、以下のようになっていました。

font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;

僕の環境では、「ヒラギノ角ゴ」をインストールしていないので、後半のほうに書かれている「メイリオ」が表示されているんだと思います。

このことから、本拡張機能は、あくまで自分の目に表示されているフォント名を教えてくれるツールなんだと思います。その人が指定しているフォントは、また別物ってことです。

感想

以上、ウェブサイトのフォントを検出してくれるChrome拡張機能「Find website used fonts」についてでした。

フォントといえば、当サイトもフォントをごっそり変えました。

Posted by ナポリタン寿司