Webページ上で、文字のフォント名を素早く・簡単に判別する方法についてです。
ブラウジングしていると、よくこんなことを思います。
『このサイトのフォント良いなぁー！なんて名前のフォントなんだろう？』
Chromeで開いている場合、文字のフォント名は『検証ツール』からでも判断できます。
しかし、それは少し面倒、、、
こちら、すぐに判別できる方法がありました。
以下のような感じで、フォントをすぐに判別できるのです。
これはChrome拡張機能『WhatFont』で実現できます。
Chrome拡張機能ですので、MacでもWindowsでも同じように使うことができます。
導入も使い方もすごく簡単でした。
Webサイト内の気になるフォント名が、すぐに判別できる環境を実現できますよ〜
ということで、やり方を分かりやすく説明します。
※上述のとおりGoogle拡張機能を使いますので、『Chrome』での利用が前提となりますのでご注意ください。
Contents
文字のフォント名をすぐに判別する方法
最初に全体の流れをお見せします。
作業の流れ
簡単 4ステップ です。
- 手順①：『WhatFont』ページを開く
- 手順②：『WhatFont』をChromeに追加する
- 手順③：メニューバーの『WhatFont』をクリック
- 手順④：気になるフォントにマウスオーバー or クリック！
では、順番に見ていきましょう。
手順①：『WhatFont』ページを開く
まずは『WhatFont』をChromeに追加していきます。
以下のリンクをクリックし、『WhatFont』ページを開きます。
『WhatFont』のウェブストアページが表示されました。
手順②：『WhatFont』をChromeに追加する
『Chromeに追加』をクリックします。
『拡張機能を追加』ボタンをクリックします。
追加されると上の画像のように表示されます。拡大すると、、、
「WhatFont」がChromeに追加されました
上記のとおり、これで追加が完了しました。
手順③：メニューバーの『WhatFont』をクリック
Chromeのメニューバーに『WhatFont』が追加されているはずです。
隠れている場合もあるので、まずは常に見える位置に表示させていきましょう。
Chromeのウィンドウ右上に、上のような『パズル』アイコンがあると思います。
こちらをクリックします。
画像のとおり『WhatFont』が追加されていますね。
メニューバーに常時固定させたいので、「ピン止め」アイコンをクリックしときましょう。
メニューバーに常時固定されました。
手順④：気になるフォントにマウスオーバー or クリック！
とってもオシャレな『MIYASHITA PARK』さんのサイトを元に使い方をご紹介します。
https://www.miyashita-park.tokyo/
メニューバー上の『WhatFont』アイコンをクリックします。
『Exit What Font』と表示されれば、フォントを調べる準備が完了です。
画面上の気になる場所ををマウスオーバーします。
すると、使われているフォント名が表示されます。
ここでは『Oswald』が使われているようです。
こちらでは『Noto Sans JP』が使われているようです。
また、クリックすると更に詳細な情報が表示されます。
別の場所をクリックするごとにどんどん表示される仕様のようです。
終了したいとき
終了したい場合、２つの方法があります。
- 画面右上の『Exit What Font』をクリックする
- 『esc』キーを押下する
個人的には、『esc』キーがおすすめですね。
無事、お目当ての文字の『フォント名』を判定することができました！
お疲れさまでした。
まとめ
Webサイト上のフォント判定方法についてでした。
『WhatFont』を使えば、マウスオーバーするだけで判定完了できます。
また、分かる情報はフォント名だけでなく、
- Style
- Weight
- Size
- Line Height
- Color
これらの情報もワンクリックで知ることができます。
ぜひ有効活用してみてください。
というわけで、今回は以上です！
最後までお読み頂き、ありがとうございました。
素敵なPCライフをお楽しみください。
