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

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

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

webフォント

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

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での確認方法です。

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

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

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

検証を選択します

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ただ、残念なことにこのサイトは日本語には対応していません。日本語に対応しているサイトは次のIdentifontです。

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

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

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

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

平成丸ゴシック

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

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

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

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

平成丸ゴシックのせ

平成丸ゴシック_さ

平成丸ゴシック_こ

平成丸ゴシック_や

平成丸ゴシック_あ

平成丸ゴシック_き

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

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

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

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

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

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

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

スポンサーリンク
広告

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

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

スポンサーリンク
広告