ライフハック

Webサイトで使用しているフォントの種類を簡単に調べる方法

投稿日:

Webサイトを閲覧していておしゃれなフォントを見つけた時など、自分のブログの参考にしようと何のフォントを使っているのか知りたいと思うことがあります。

フォントの種類はブラウザの開発ツールを使って調べることもできますが、拡張機能を使えばもっと簡単にフォントを調べることが可能です。

そこで、ここでは「WhatFont」という拡張機能を使って、Webサイトで使われているフォントを調べる方法について説明します。

 

Webサイトのフォントを簡単に調べる方法

それでは、以下に「WhatFont」を使ってWebサイトのフォントを調べる方法について説明します。

 

「WhatFont」とは?

はじめに、「WhatFont」とは何かを簡単に説明します。

「WhatFont」は、ツールバーに表示されるボタンをクリックしてサイトの文字にカーソルを当てるだけで、そのWebサイトで使っているフォントを簡単に調べられる拡張機能です。

Google ChromeやFirefoxにインストールして使うことができます。

この拡張機能を使うと、手間なくWebサイトのフォントを調べられるので、ブログで使うフォントを選ぶために他のサイトを参考にしたい時などに便利です。

ではどのようにして「WhatFont」を使ってフォントを調べるかですが、「WhatFont」を使うために必要な作業は以下のとおりです。

「WhatFont」を使うために必要な作業

  1. ブラウザに「WhatFont」をインストールする
  2. ツールバーに表示される「WhatFont」のボタンをクリックする
  3. Webサイト上の文字にカーソルを当て、フォントを確認する
  4. 「WhatFont」を終了する

上記①~④の詳しい手順については、以下の項目で解説します。

 

①「WhatFont」をインストールする

まず、①の「WhatFont」をインストールする手順について見ていきます。

「WhatFont」はGoogle Chromeでも使えますが、ここではFirefoxに追加する場合の手順を解説します。

インストールの流れは、以下のとおりです。

「WhatFont」の追加手順

  1. 「Firefox向けアドオン」ページから「WhatFont」のページを表示
  2. 「Firefoxへ追加」ボタンをクリック
  3. 確認メッセージが表示されたら、「追加」をクリック
  4. 再び確認メッセージが表示されるので「OK」をクリックする

次に、上記①~③までの作業を詳しく説明します。

まずは、「WhatFont」のインストールページを表示します。

WhatFont- Firefox(ja)向け拡張機能を入手

そうすると以下のような画面が表示されるので、「Firefoxへ追加」をクリックします。

そして、以下のように「WhatFontを追加しますか?」と確認メッセージが表示されたら「追加」をクリックします。

また、以下のように「WhatFontがFirefoxに追加されました」ともう一度確認メッセージが表示されたら、「OK」をクリックします。

ここまで行ったら、「WhatFont」の追加は完了です。

 

②「WhatFont」のボタンをクリックする

次に、②のツールバーに表示される「WhatFont」のボタンをクリックする作業について説明します。

まず、「WhatFont」をインストールしたブラウザでフォントを調べたいWebページを表示します。

そして、ブラウザの右上に表示されている「WhatFont」のアイコンをクリックします。

そうすると、画面の右上に「Exit WhatFont」と表示された状態になります。

この状態になったら、以下③の作業に進みます。

 

③文字にカーソルを当ててフォントを確認する

次に、③の文字にカーソルを当ててフォントを確認する作業について見ていきます。

②の状態になったら、そのままWebページ上でマウスを移動させ、希望の文字にカーソルを当てると、カーソルを当てた位置にある文字のフォントが表示されるようになります。

また、文字の上でクリックすると、以下のように「フォントサイズ」や「行の高さ」「文字色」を併せて確認することも可能です。

画面上で何度もクリックすると、フォントの詳細画面ががいくつも開いてしまうので注意が必要ですが、右上の「☓」をクリックすれば消すことができます。

上記の要領で、Webページ上のフォントを簡単に調べることができます。

 

④「WhatFont」を終了する

次に、④の「WhatFont」を終了する時の作業について見ていきます。

③でフォントを確認した後、そのままにしておくと、そのWebページ上でカーソルを移動させる間ずっとフォントが表示されてしまったり、リンク部分をクリックしても反応しないままになったりしてしまうので、調べたいフォントの種類が分かったら「WhatFont」を終了させます。

「WhatFont」を終了するには、ツールバー下に表示されている「Exit WhatFont」という部分をクリックすればOKです。

クリックして、「Exit WhatFont」の表示が消えたら完了です。

ただし、もう一度フォントを調べたい時には、上記②~④の作業を繰り返せばいつでもWebサイトのフォントの確認ができます。

 

まとめ

以上、Google ChromeやFirefoxの拡張機能「WhatFont」を使って、Webページで使っているフォントを調べる方法について説明しました。

Webページを閲覧していて、たまたま気になるフォントが見つかって、何のフォントを使っているのか知りたいという場合がありますが、そんな時には「WhatFont」を使って調べると便利です。

「WhatFont」を使えば、拡張機能をインストールしたら、ツールバーに表示されるボタンをクリックして、文字にカーソルを当てるだけでフォントを確認することができます。

また、画面上でクリックすれば、フォントサイズや文字色なども確認することができるので、文字色を参考にしたい時にも役立ちます。

簡単に使えて便利なので、ブログのデザインの参考にフォントを調べたい時などにおすすめです。

スポンサーリンク

  • この記事を書いた人

ミヤノ カナコ

ブログ運営歴5年目のブロガー・フリーランスライター。OL時代には、多くのカスタマーセンターやヘルプデスクでメール・電話での問い合わせ対応に従事。現在は、ブログでの情報提供のほか、エッセイの発信を中心に活動中。このブログでは、ブログのつくり方や文章の書き方など、ネットビジネスに役立つ情報をお届けします。

Copyright© ミヤノカナコ.com , 2019 All Rights Reserved.