Webサイトで使われているフォントを3秒で調べることができるChrome拡張機能の「WhatFont」を紹介するよ！

どうもダサうぇぶです。

突然ですが、あなたにはお気に入りのWebサイトはありますか？

そのサイトのどんなところが好きですか？

Web関係の仕事をしている方は、情報収集やデザインの勉強のために色々なサイトをみていることと思います。

このサイトは色使いが綺麗だなとか、写真の魅せ方が上手いなとか、フォントの選び方にセンスを感じるなど、Web制作者にとって良いサイトを参考にすることはとても勉強になります。

特に個人的には、フォントの使い方が上手いサイトを見ると、このサイトはどのフォントを使っているんだろう？っていつも気になってしまいます。

そこで今回はWebサイトのフォントを一瞬で調べることが出来るChrome 拡張機能の「WhatFont」を紹介しようと思います。

WhatFontって何？

Webサイトの文字の上にカーソルを置いたりクリックするだけで文字情報を調べることが出来るChromeの拡張機能です。

まずは下記からChromeウェブストアにアクセスしてください。

アクセスしたら、右上の➕CHROMEに追加をクリックして拡張機能を追加をクリックします。

たったこれだけでインストールは終了となります。とっても簡単でしょ？

※上の画像は既にChromeに追加済みになっています。

Chrome 拡張機能を追加したら、ブラウザ右上にある「f? 」フォントマークのアイコンをクリックします。

そのあとは調べたいフォントの上にカーソルを置いてクリックをするだけ。

クリックするとそのサイトで使われいるフォントの種類、フォントの指定、フォントサイズ、行の高さ、フォントのカラーコードが表示される仕組みになっています。

※ちなみに「 Exit WhatFont 」をクリックすると通常モードに戻ります。

WhatFontの説明

使われているフォントが分かったらグーグルなどで検索をかけてみるとそのフォントについての情報が見つかるのでフリーフォントだった場合はダウンロードして使うことも出来きますね。

WhatFontで調べたフォント情報はあくまでもHTMLやCSSで指定されているフォントの詳細データとなります。

そのため、HTMLやCSSで指定されているフォントがユーザーのPCに登録されていない場合は、それぞれのPCにインストールされているデフォルトのフォントが適用される仕組みになっています。

つまり、WhatFontで調べたものと実際に閲覧しているフォントは異なる場合があるので注意が必要です。

ちなみにGoogleWebフォントを使っている場合は、サーバにフォントデータがあるため、どの端末から見ても同じフォントで表示されます。

先日、GoogleWebフォントについて記事を書いたのでよければ下記を参考にしてくださいね。

いががでしたでしょうか？今回はWebサイトのフォントを簡単に調べることが出来るChrome 拡張機能WhatFontを紹介しました。

これをきっかけに自社サイトのフォントやブログで使っているフォントを改めて見直してみてはどうですか？

良いフォントを使っているWebサイトを参考にすることで自社サイトのクオリティーもきっとあがることと思います。

今回はここで終わりです。
それではまた！