WhatFont|WEBサイトで使われているフォントを調べるGoogle Chrome拡張機能

WhatFont|WEBサイトで使われているフォントを調べるGoogle Chrome拡張機能

WhatFontはWEBサイトで使われているフォントの種類やCSSを調べるときに便利なGoogle Chrome拡張機能です。

サイトのデザインリニューアルのときなど、既存サイトや参考サイトで使われているWEBフォントを知りたいケースがあると思います。
そんなときにいちいちGoogle Chromeの検証機能を使って、適用されているCSSを調べるのはかなりの手間です。

今回はWhatFontを使って、WEBサイトのフォント情報をかんたんに調べる方法を紹介していきます。

WhatFontとは

WhatFontのダウンロードページのキャプチャ

WhatFontとは、WEBサイトで使用されているフォントに適用されているCSSをワンクリックで調べることができるGoogle Chrome拡張機能です。

WhatFontでは以下の要素を調べることができます。

  • font-family:フォントの種類
  • font-style:標準・イタリック体・斜体といったスタイル
  • font-weight:フォントの太さ
  • font-size:フォントの大きさ
  • line-hight:行間
  • color:文字色

これだけの情報が調べられれば、参考サイトと同じデザインでフォントを実装することもできますね。
それでは拡張機能の使い方をみていきましょう。

WhatFontの使い方

インストールの方法

ChromeウェブストアのWhatFontのダウンロードページからインストールします。

※Firefox・Safari・Internet Explorerの場合は、WhatFontの公式サイトからブックマークレットとして利用できます。

WEBフォントのCSSを調べる

拡張機能をインストールすると、ブラウザの右上にWhatFontのアイコンが表示されるようになります。
アイコンをクリックすると拡張機能が起動します。

WhatFontのアイコンのキャプチャ

WEBページ上のフォントを調べたい箇所にマウスオーバーすると、フォント名が表示されます。

フォントを調べたい箇所にマウスオーバーでフォント名が表示される

クリックするとフォントに適用されているCSSの詳細が表示されます。

フォントに適用されているCSSの情報を表示

拡張機能の起動中はテキストリンクなども機能しなくなるので、もし普通にサイトを閲覧したくなったら拡張機能を停止しましょう。
画面右上の『Exit WhatFont』ボタンをクリックすると拡張機能が停止します。

拡張機能の停止ボタン

調べられるCSSの詳細

適用されているフォント

閲覧中のブラウザで適用されているフォントが表示されます。
※OS・ブラウザなどによって適用されるフォントは異なります。

適用中のフォントの種類

font-family:フォントの種類

CSSの『font-family』が表示されます。
フォントの種類(フォント名)のことを指します。

font-familyを表示

font-style:標準・イタリック体・斜体といったスタイル

CSSの『font-style』が表示されます。
標準・イタリック体・斜体といったフォントのスタイルが指定されます。

font-styleを表示

font-weight:フォントの太さ

CSSの『font-weight』が表示されます。
文字の太さのことを指します。数字が大きいほど太文字です。

font-weightを表示

font-size:フォントの大きさ

CSSの『font-size』が表示されます。
文字の大きさのことを指します。ピクセル形式で表示されます。

font-sizeを表示

line-hight:行間

CSSの『line-height』が表示されます。
行間のことを指します。ピクセル形式で表示されます。

line-heightを表示

color:文字色

CSSの『color』が表示されます。
文字色のことを指します。
カラーサンプルをクリックするとrgb形式に表示が変わります。

colorを表示

フォントのデザインサンプル

最下部に適用中のフォントのデザインサンプルが表示されます。

フォントのデザインサンプルを表示

(オプション)アイコンデザインを変更

特に利用することはないかと思いますが、ブラウザに表示されるWhatFontのアイコンを変更することもできます。
ブラウザ右上のWhatFontのアイコンを右クリックして、『オプション』をクリックします。

WhatFontのメニュー『オプション』

アイコンカラーを白と黒の2種類から選択できます。

WhatFontのアイコンカラーを選択

まとめ

今回はWEBサイトのフォントの種類や、適用されているCSSをワンクリックで調べられるGoogle Chrome拡張機能『WhatFont』を紹介しました。

WEBデザイナーなどWEB制作の現場では、見ているサイトのフォントを素早く調べたいというケースが多々あると思います。
この拡張機能はフォントの種類だけでなく適用されているCSSを調べることができるので、デザインやコーディングまで一気に反映できるところがポイントです。

特に仕事は関係なく、お気に入りのサイトで使われているWEBフォントを見ていくだけでも楽しそうですね。

サイトのWEBフォントをよく調べるというかたは、ぜひインストールしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です