ダイモン Tips

学びの記録

サイトのフォントを簡単に調べる最強の拡張機能「WhatFont」の使い方

2024/09/07に公開
2024/09/07
#デザイン
#フォント

はじめに

デザイナーなら、一度は「このサイトのフォント名は何だろう?」「フォントの調べ方がわからない…」という悩みを経験したことはありませんか?ウェブサイト上でディベロッパーツールを使えばフォント情報を確認できますが、多数のフォント名が表示されて、目的のフォントを特定するのに時間がかかることがあります。

この記事では、そんなフォント調査の悩みを一発で解決する最強のGoogle Chrome拡張機能「WhatFont」を詳しく紹介します。私はこの拡張機能を導入してからは、ウェブサイトのフォントを簡単かつ迅速に調べられるようになり、デザイン作業の効率が格段に上がりました!

フォント検索に優れた拡張機能”What Font”

「WhatFont」は、ウェブページ上のフォントをクリック一つで簡単に調べることができる拡張機能です。フォントの調べ方に悩む人にとって、まさに救世主となる便利ツールです。

WhatFontのダウンロードはこちら

使用方法

WhatFontの使い方は非常にシンプルで、誰でも簡単に操作できます。以下に詳細なステップを説明します。

拡張機能の中から「What Font」をクリック

拡張機能のパズルピースアイコンから、「What Font」をクリックしましょう

「What Font」のファビコンを表示しているキャプチャバナーになります。2列で表示しており、上がChromeのパズルピースの中にある「What Font」で、したがArcのものになります。
赤枠が「What Font」のファビコン

webサイト内の文字にカーソルを合わせる

パッとフォント名を確認したい場合は、webサイト内の文字にカーソルを合わせるだけでフォント名が表示されます。

実際にWhat Fontを使用してる際の画像。カーソルの下にフォント名のみ表示されている。
テキストにカーソルを合わせるとカーソルの下にフォント名が表示されます

クリックで確認

文字をクリックすると詳細な情報が表示されます。

  • フォント名
  • フォントサイズ
  • カラー
  • 行の高さ
  • フォントウェイト

この詳細表示により、デザインの再現や調整に必要な正確な情報を得ることができるので、とても便利です。

実際にWhat Fontを使用してる際の画像。クリックすると文字をクリックすると詳細な情報が表示されます。  フォント名  フォントサイズ  カラー  行の高さ  フォントウェイトが表示されている。
テキストをクリックすると、フォントの詳細が表示されます

フォントを調べ終えたら、再度パズルピースから「What Font」をクリックして停止しましょう。

おわりに

「WhatFont」は、デザイナーにとって、フォントを調べる際の強力な味方となる拡張機能です。

フォントの調べ方に悩む時間を減らし、ウェブデザインやフォント選びの効率を上げてみてください!

DS

ダイモン シュウ

人間界のエイリアン植物こと、ダイモンです!

大好きな植物のことや、日々の学びをアウトプットしています。

DS

ダイモン シュウ

人間界のエイリアン植物こと、ダイモンです!

大好きな植物のことや、日々の学びをアウトプットしています。

目次