この記事が気に入ったらシェアしてください

Webサイトの文字や画像のフォントを誰でも簡単に調べる方法!

この記事が気に入ったらシェアしてください

webフォント

Photo credit: Marco / Zak via Visual Hunt / CC BY-ND

Webサイトを見ていて、「あ、このサイトの文字読みやすいな」とか「この文字オシャレだな」って思う時ありますよね。

そんな時に「サイトの文字」がどんなフォントかを簡単に調べる方法についてご紹介します。また、「画像ファイルのフォント」を調べる方法についてもご紹介します。

なお、今回ご紹介する方法は、パソコンから調べる方法です。iPhoneからフォントを調べたいという方は以下の記事をご覧ください。

iPhoneでWebサイトの文字フォント(種類やサイズ)を簡単に調べる方法
先日、パソコンでサイトのフォントを調べる方法についてご紹介しました。参考 Webサイトの文字や画像のフォントを誰でも簡単に調...
スポンサーリンク
広告

文字のフォントを調べる方法

webブラウザの標準機能である開発者ツールを使って文字のフォントを調べられます

確認が簡単なWebブラウザはFirefoxもしくはChromeです。今回はFirefoxとChromeでの調べ方についてご紹介します。

以降、FirefoxとChromeの開発者ツールでフォントを調べる方法についてご説明します。

Firefoxの開発者ツールで文字のフォントを調べる方法

まずは調べたいWebサイトの文字を選択して下さい。

サイトの文字を選択

次に、文字を選択している状態で開発者ツールを起動して下さい。

開発者ツールはブラウザのメニューから起動するか、ショートカットキーを使って起動してください。

なお、ブラウザの開発者ツールを起動するためのショートカットキーはOSによって異なります。OSにあわせて以下のショートカットキーで開発者ツールを起動して下さい。

  • Windows:F12キー
  • Mac:「Command」 + 「Option」 +「 i(アイ)」

開発者ツールの右側に「フォント」という項目があり、その中のフォント名が選択した文字のフォントです。

ここでの確認結果は”Font Awesome”でした。(Windowsにて確認)

開発者ツールでフォントを確認

Chromeの開発者ツールで文字のフォントを調べる方法

次はGoogleのChromeでの文字のフォントを確認する方法です。

Firefoxの時と同様に、まずはフォントを確認したい文章を選択します。

フォントを確認したい文章を選択します

次に、右クリックで「検証」を選択します。

検証を選択します

開発者ツールが表示されますので、画面の「Computed」のタブを選択し、「Rendered Fonts」にてフォントを確認します。

ここでの確認結果は”Hiragino Kaku Gothic ProN”でした。(Macにて確認)

chromeのフォントを確認します

Chromeのアドオンで文字のフォントを調べる方法

Chromeのアドオン「WhatFont」を使って文字のフォントを調べることもできます。

まずは「WhatFont」をChromeに追加してください。

whatfontの追加方法

次に、フォントを調べたいサイトを表示し、右上にある「f?」のアイコンをクリックします。

whatfontの使い方

すると、マウスを文字の上に移動するだけで、サイトのフォントが確認できます。

サイトのフォントを検索する方法

また、文字をクリックすると、より詳細なフォント情報が確認できます。「文字の大きさや文字の色」なども確認できます。

whatfontでフォントを検索する方法

フォントの詳細は複数表示することも可能です。

whatfontでフォントを検索する方法

よく見ると、「見出しと本文と文字の色が違う」ということがわかります。人気サイトは色んな工夫がされているので、面白いです。

ちなみに、「WhatFont」と同じようなアドオンで「What Font」というアドオンもあります。(半角の空白があるかないかの違いだけで、機能もほぼ同じです)

画像のフォントを調べる方法

画像ファイルのフォントを調べる方法は以下2種類があります。

  • フォントの画像ファイルをサイトにアップロードする
  • フォントの特徴を選択する

以降、それぞれの調べ方についてご紹介します。

フォントの画像ファイルをサイトにアップロードする

WhatTheFont」というサイトを使ってフォントを確認します。

今回、フォントをチェックする画像は以下のものとします。フォントは画像の文字の通り、GEORGIAです。

georgiaのフォント
出展:http://wp.yat-net.com/?p=3444

まず、「WhatTheFont」にアクセスして画像を選択し、「Continue」を選択します。

画像のフォントを調べる方法

次の画面で画像内の文字を認識し、テキストで表示されます。テキストの文字が画像と一致しているかを確認します。空欄の場合は文字を入力します。

入力が終われば、Continueボタンを押下します。

画像のフォントをチェックした結果

次の画面で画像ファイルの文字フォント候補が複数表示されます。

今回は全部で34のフォント候補が表示され、この画像の結果はGeorgiaでしたのでしっかりと正解が含まれていました。

画像ファイルのフォントをチェックした結果

ここでご紹介した「What The Font」とは別に、「What Font is」というサイトでも同様に画像ファイルからフォントを確認することができます。

What Font is」も「What The Font」と同様に、画像ファイルをアップロードした後に、文字が分解されるため、正しい文字を入力してフォントを判定します。

whatfontisでフォントを調べる方法

引用 フォント名が分からない日本語・英語のフォントを検索できる無料サービスのまとめ

ただ、残念なことにこれらの両サイトとも日本語には対応していません。日本語に対応しているサイトは次にご紹介する「Identifont」です。

フォントの特徴から調べる(日本語対応)

日本語に対応しているサイトとして、「Identifont」を紹介します。

今回は「平成丸ゴシック」を「形状別フォント検索」で調べてみました。

ちなみに、平成丸ゴシックとはこんなフォントです。

平成丸ゴシック

では、まずサイトの左上にある「形状別フォント」を選択します。

サイトの左上にある形状別フォントをクリック

すると、次の画面からフォントの特徴を選択していきます。全部で大体5〜10個です。

今回は平成丸ゴシックの特徴を選んでいきました。

平成丸ゴシックのせ

平成丸ゴシック_さ

平成丸ゴシック_こ

平成丸ゴシック_や

平成丸ゴシック_あ

平成丸ゴシック_き

最後まで選びきると、結果が出ます。

結果は、、、、大正解!!

平成丸ゴシックのフォント

紛らわしいフォントの場合は、結果が複数表示されることもあります。今回は特徴的なフォントだったこともあり、結果は1つだけでした。

ただ、残念ながらこちらのサイトは有名なフォントしか対応しておらず、マイナーなフォントは対応していないそうです。

参考:http://wind-mill.co.jp/iwashiblog/2014/09/font-check/

参考:http://sterfield.co.jp/blog/product/webデザイン/画像のフォントが何かを調べる方法/

スポンサーリンク
広告
広告

この記事が気に入ったらシェアしてください

もし良かったらフォローしてください