WhatFont（ワットフォント）とは
Webサイトに使われているフォントの種類を一瞬で調べられる、Chrome拡張機能です。
サイト上の文字にカーソルを乗せるだけで、フォント名やスタイルを簡単に確認できます。
「このサイトのフォントって何を使っているんだろう？」
そんな疑問をすぐ解決できる、デザイン調査では定番のツールです。
Web制作の現場ではもちろん、デザインの参考にしたいときにも非常に便利です。
主な機能・特徴
| クリック不要 | 文字にカーソルを合わせるだけでフォント情報を表示 |
| 詳細情報も取得可能 | ・フォント名 ・フォントファミリー ・サイズ（px） ・行間（line-height） ・色（HEX/RGB） ・ウェイト（bold など） といったCSS情報がすぐに確認可能 |
| ページ全体の調査可能 | Webフォント、システムフォント問わず読み取り可能 |
| 軽量 | ブラウザの動作を邪魔しない設計で快適 |
活用例
- 他社サイトや参考サイトで使用されているフォントを調査したいとき
- Webデザインのリサーチ
- フォントの雰囲気を比較したいとき
- コーディング時にデザイナー指定とズレがないか確認
- UIレビューでのフォントチェック
- サイトクローン制作の調査ツールとして
初心者のフォント学習にも役立ちます。
使い方
1.インストール（Chrome）
1.Chrome ウェブストアのページへアクセス
2.「Chrome に追加」をクリック
3.「拡張機能を追加」ボタンを押す
2.調べたいサイト上で拡張機能アイコンをクリック
ポインタが「Font」と書かれた状態に変わります。
3.調べたい文字にカーソルを合わせる
サイト上の調べたい文字にマウスを乗せると、フォント名がポップアップ表示されます。
さらに、ポップアップの文字をクリックすると、詳細なフォントデータが表示されます。
- 確認できる項目の例：
- ・font-family
- ・font-size
- ・line-height
- ・color
- ・weight
- ・style（italic など）
4.調査の終了の仕方
画面右上の「Exit WhatFont」または拡張アイコンをクリックすれば解除されます。
拡張機能について
- ・解析結果はあくまで推測が含まれる
- ・商用利用も可能
- ・利用したことにより発生する損害などの責任は負わない
| 料金形態 | 無料 |
| 登録・ログイン | 不要 |
| 利用規約 | Chromeウェブストアの拡張機能規約および、拡張機能作者のプライバシーポリシーに従うこと |
| 公式サイト | 作者のプライバシーポリシー及びダウンロード |
※掲載内容は変更される場合があります。必ず【公式サイト】で確認後、自己責任でご利用ください。
注意点
※画像の文字・SVG のアウトライン文字など、フォントではない文字情報は取得できません。
※Webフォントの読み込み状態によっては表示されないことがあります。
※セキュリティ設定が強いサイトや Canvas を多用したサイトでは正常に取得できないケースがあります。
※表示される font-family は「実際に使われたフォント」なので、複数指定されている場合は一部のみの情報になることがあります。
