Webサイトが使用しているフォントを確認する方法

公開: 2020-09-27

Webサイトで見たフォントに完全に夢中になったことがある場合は、それが何と呼ばれているのかを見つけて、自分のコンテンツで使用できるようにする方法を疑問に思ったことがあるかもしれません。 質の高いタイポグラフィは訪問者の読書体験を向上させることができるので、それを見つけるために努力する価値があるかもしれません。 Webサイトで使用されているフォントを確認する理由に関係なく、役立つツールはたくさんあります。

この記事では、Webサイトで使用されているフォントを確認する理由について説明します。 また、その方法についても説明します。

始めましょう！

私たちのYoutubeチャンネルを購読する

Webサイトで使用されているフォントを確認する理由

すでに述べたように、美しく読みやすいフォントは、サイトのユーザーエクスペリエンス（UX）と読みやすさを向上させることができます。 また、訪問者がコンテンツを解読するのに苦労することなく、コンテンツを快適に利用できるようにします。 あなたのテキストがスタイリッシュであるが判読できない場合、読者はあなたの資料を理解したり評価したりするのが難しいと感じるでしょう。

召喚状（CTA）ボタンも、テキストが読めない場合はほとんど役に立たないことが判明する場合があります。 これが、スタイリッシュで読みやすいことで注目を集めるフォントのリストを保持しておくと便利な場合がある理由です。 その後、サイトで、または将来的にクライアントに使用できます。

Webサイトが使用しているフォントを確認する方法（3つの利用可能な方法）

Webサイトで使用されているフォントを確認するために使用できる方法は複数あります。 ブラウザの検査機能は優れた頼りになるソリューションですが、同等の効果を生み出すことができる拡張機能があります。 オンラインツールを使用して、画像からフォントを見つけることもできます。 これらの各オプションを見てみましょう。

1.ブラウザインスペクタツールを使用してフォントを識別します

Webサイトが使用しているフォントを確認する最も簡単な方法の1つは、ブラウザーのインスペクターツールを使用することです。 この例ではChromeInspectorを使用しますが、他のブラウザーにも同等の機能があることに注意してください。

まず、検索するフォントが含まれているWebページを右クリックします。 表示されるメニューから、[検査]を選択します。

ChromeInspectorツールを開きます。

キーボードショートカットを使用する場合は、WindowsまたはLinuxの場合はCtrl + Shift + Iを試してください。 Macを使用している場合、同等のものはCmd + Shift + Iです。

画面右側のウィンドウで、チェックアウトするフォントを使用してテキストを探します。 対応するHTML要素を選択すると、強調表示されます。

ChromeInspectorツールでテキスト要素を選択します。

次に、[計算済み]タブをクリックして、「font-family」を検索します。

ChromeInspectorツールでフォントファミリーを表示します。

ここにリストされているフォントの名前とそのスタイルが表示されます。

フォントに関連するCSSを確認するには、[スタイル]タブを確認してください。 スクロールして、フォント関連の値を検索できます。 ただし、ここにはオーバーライドや無関係なスタイルルールがある可能性があるため、通常は[計算済み]タブの方が便利です。

2.ブラウザ拡張機能を介してフォントを検索する

ブラウザ拡張機能は、特にインスペクタに慣れていない場合に、Webサイトでフォントの詳細を見つけるためのより簡単な方法を提供します。 さらに、彼らは通常、あなたが探している答えをより速く提供できるので、あなたは目の前の仕事に戻ることができます。

そのようなアドオンには次のものがあります。

  • Fontanello：無料で使用できるこの拡張機能を使用すると、参照中にフォントを強調表示して右クリックするだけで、フォントの名前、太さ、スタイルなどを簡単に見つけることができます。
  • WhatFont：フォント検出をさらに合理化し、WhatFontを使用すると、書体にカーソルを合わせるだけでその名前を表示できます。
  • CSS Peeper： Webデザイナーを念頭に置いて作成されたこの拡張機能は、もう少し堅牢で、WebページのCSSコードから追加の詳細を伝えることができます。

ただし、これらの拡張機能にはそれぞれさまざまなブラウザサポートがあります。 WhatFontは、Firefox、Chrome、Safari、およびInternetExplorerで使用できます。 一方、Fontanelloは、FirefoxとChromeでのみ使用できます。 CSS Peeperは、他のプラットフォームでは使用できないChrome固有のツールです。

特定のフォントの名前をすばやく見つけるために、WhatFontが最も簡単に使用できるオプションです。 ほとんどのブラウザもサポートしているので、簡単なデモンストレーションに使用します。

WhatFontをインストールすると、ブラウザのツールバーでアクティブにしてテキストにカーソルを合わせると、Webサイトが使用しているフォントを確認できます。

WhatFontブラウザ拡張機能を使用して、Webサイトが使用しているフォントを確認します。

最初にテキストにカーソルを合わせると、フォントの名前のみが表示されます。 ただし、名前をクリックすると、サイズ、太さ、色、線の高さなどの詳細を含む展開されたポップアップが表示されます。 また、TypekitまたはGoogleFontsを介して書体が利用可能かどうかを識別できます。

フォントの詳細の確認が完了したら、ブラウザウィンドウの右上隅にある[ WhatFontを終了]ボタンを使用してツールを終了できます。

3.画像内のフォントを検出する

最後に、画像で使用されているフォントを表示してみることもできます。 これには、ロゴやインフォグラフィックで見た書体が含まれます。 フォント検出器の経験では、WhatTheFontはこの仕事に最も効果的なオンラインツールです。

WhatTheFontを使用するには、問題の画像をアップロードし、関連するフォントのセクションを選択する必要があります。

WhatTheFontの画像からテキストを選択します。

次に、識別しようとしているフォントと完全に一致しない場合でも類似しているいくつかのフォントを含む結果ページが返されます。

WhatTheFontの結果。

ここでの成功率は、フォントのソースと人気によって異なる場合があります。 書体の正確な名前が非常に重要である場合、必要なものを提供するツールを見つけるのは難しいかもしれません。

ただし、画像で見つけたものと同様のフォントを使用することに慣れている場合は、オンライン検出器がニーズにぴったり合うはずです。

結論

視覚的に魅力的で読みやすいフォントは、Webサイトの訪問者の読書体験を向上させることができます。 これにより、サイトまたはクライアントのいずれかで使用できる新しい書体に注意を払うように促される場合があります。 Webサイトで使用されているフォントを確認する理由に関係なく、役立つツールはたくさんあります。

この投稿では、Webサイトが使用しているフォントを確認するための3つの方法について説明しました。

  1. ブラウザインスペクタツールを使用してフォントを識別します。
  2. WhatFontなどのブラウザ拡張機能を使用してフォントを検索します。
  3. WhatTheFontを使用して画像内のフォントを検出します。

ウェブサイトで使用されているフォントを確認する方法について質問がありますか？ 以下のコメントセクションでお知らせください！

rudall30 / shutterstock.comによる画像