Webサイトを見ていて、「あ、このサイトの文字読みやすいな」とか「この文字オシャレだな」って思う時ありますよね。
そんな時に「Webサイトの文字」がどんなフォントかを簡単に調べる方法についてご紹介します。また、「画像のフォント」が何かを調べる方法についてもご紹介します。
なお、今回ご紹介する方法は、パソコンから調べる方法です。iPhoneからフォントを調べたいという方は以下の記事をご覧ください。
参考 iPhoneで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のアドオン「WhatFont」を使って文字のフォントを調べることもできます。
まずは「WhatFont」をChromeに追加してください。
次に、フォントを調べたいサイトを表示し、右上にある「f?」のアイコンをクリックします。
すると、マウスを文字の上に移動するだけで、サイトのフォントが確認できます。
また、文字をクリックすると、より詳細なフォント情報が確認できます。「文字の大きさや文字の色」なども確認できます。
フォントの詳細は複数表示することも可能です。
よく見ると、「見出しと本文と文字の色が違う」ということがわかります。人気サイトは色んな工夫がされているので、面白いです。
画像のフォントを調べる方法
画像ファイルのフォントを調べる方法は以下2種類があります。
- フォントの画像ファイルをサイトにアップロードする
- フォントの特徴を選択する
以降、それぞれの調べ方についてご紹介します。
フォントの画像ファイルをサイトにアップロードする
「WhatTheFont」というサイトを使ってフォントを確認します。
今回、フォントをチェックする画像は以下のものとします。フォントは画像の文字の通り、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」と同様に、画像ファイルをアップロードした後に、文字が分解されるため、正しい文字を入力してフォントを判定します。
引用 フォント名が分からない日本語・英語のフォントを検索できる無料サービスのまとめ
ただ、残念なことにこれらの両サイトとも日本語には対応していません。日本語に対応しているサイトは次にご紹介する「Identifont」です。
フォントの特徴から調べる（日本語対応）
日本語に対応しているサイトとして、「Identifont」を紹介します。
今回は「平成丸ゴシック」を「形状別フォント検索」で調べてみました。
ちなみに、平成丸ゴシックとはこんなフォントです。
では、まずサイトの左上にある「形状別フォント」を選択します。
すると、次の画面からフォントの特徴を選択していきます。全部で大体５〜１０個です。
今回は平成丸ゴシックの特徴を選んでいきました。
最後まで選びきると、結果が出ます。
結果は、、、、大正解！！
紛らわしいフォントの場合は、結果が複数表示されることもあります。今回は特徴的なフォントだったこともあり、結果は１つでした。
ちなみに、identifontには英語版のサイトもあります。英語のフォントを調べたい方は英語版のサイトも使ってみて下さい。
参考：http://wind-mill.co.jp/iwashiblog/2014/09/font-check/
参考：http://sterfield.co.jp/blog/product/webデザイン/画像のフォントが何かを調べる方法/
コメント