ウェブサイトやブログに使われているフォント名などの情報を、ワンクリックで取得できるChromeの拡張機能「WhatFont」をご紹介します。
WhatFontは無料で使える拡張機能で、使われているフォント名だけでなく、フォントに設定されているサイズ、太さ、行間、CSSの属性や属性値も詳しく表示してくれます。
また、WhatFontはiPhone向けのスマホアプリもあり、iPhoneのフォントも調査できます。
フォントの調査は「このフォント何? ウェブサイトやブログのフォントを調べる方法」でブラウザの開発者ツールを使う方法を紹介しましたが、WhatFontを使ったほうが簡単ですよ。
WhatFontのインストール
WhatFontはChromeの拡張機能なので、ChromeウェブストアからWhatFontをインストールします。以下からChromeウェブストアに進んで下さい。
Chrome拡張機能追加 Chromeウェブストア
Chromeウェブストア内で「WhatFont」と検索してください。同じ名前がいくつか出てきますが、WhatFontはグレーのアイコンです。
WhatFontを「Chromeに追加」してください。
WhatFontのインストールが完了しました。Chrome拡張機能の管理からWhatFontを起動してください。
WhatFont拡張機能を有効化
WhatFontはChrome拡張機能のツールバーに固定して、アイコン表示させると有効になります。
ツールバーの「拡張機能」をクリックして、拡張機能の一覧からWhatFontの画鋲アイコンをクリックすると、WhatFontのアイコンが表示されます。
これでWhatFontを使う準備ができました。
WhatFontの使い方
WhatFontの使い方ですが、まずはフォントを調べたいページを表示させてください。
続いてツールバーのWhatFontアイコンをクリックすると、ページの右上に「Exit WhatFont」というボタンが表示され、WhatFontが有効化されます。
マウスカーソルが切り替わって、テキストに当てるとフォント名が表示されます。この状態でもフォントの簡易調査ができるようになっています。
あとは調べたい文字をクリックすると、フォント名やFont-Family、フォントのサイズ、太さ、行間、CSS属性や属性値を詳しく表示してくれます。
表示されたフォント情報はそのまま貼り付いているので、複数の文字や文章のフォントを比較しながら調査することもできます。
フォント情報は右上の「☓」をクリックすると消去できます。
フォントの調査が終わったら「Exit WhatFont」ボタンをクリックすると、フォント情報が消えて調査を終了できます。
取得できるフォント情報
WhatFontで取得できるフォント情報は、フォント名、font-family、文字のスタイル、文字の太さ、文字サイズ、行間、文字色となっています。
サンプルとして、当ブログのフォント情報を取得してみました。
Family: Meiryo, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, sans-serif;
Style: normal
Weight: 400
Size: 18px
Line Height: 32px
Color: #000000
WhatFontが使えない場合
サイトによりますが、WhatFontを使えない場合があります。一例として、ChromeウェブストアではWhatFontが有効化されません。
WhatFontのアイコンをクリックしても「サイトのデータを読み取れないか、変更できません」と表示されて、フォントの情報が表示されません。
他にもWhatFontを使えないサイトがあるようです。その場合は、ChromeやFirefoxの開発者ツールを使って、フォントを調べるという手もあります。
あと、WhatFontは画像内のフォントを調べることはできません。調べたい画像があれば、WhatTheFontにアップロードするとフォント候補が表示されます。
iPhone用WhatFontのスマホアプリ
WhatFontはiPhone向けのスマホアプリも使えます。ブラウザはsafariのみとなりますが、iPhoneのフォントを調べることもできます。
スマホ版WhatFontの使い方ですが、safariで調べたいフォントがあるページを表示して、テキストを選択してから共有ボタンをタップし、アクションメニューから「WhatFont」を選びます。
本来はこれでフォントの情報が表示されるのですが、最新のiOS17ではうまく動作しないようで、”Please select some texts for WhatFont to inspect.”と表示されます。
WhatFontが使えないのは、iPhone側かWhatFontアプリの問題なのかは不明です。
開発者ツールとWhatTheFontの使い方は、以下の記事をご参照ください。
