フォントを調べる方法とは?画像・Webページ・PDFから書体名を特定する手順

素敵なWebサイトやバナー、チラシを見かけて「このフォント、なんていう名前だろう」と気になったことはありませんか。

フォントは、調べたいものがWebページなのか、画像なのか、PDFなのかによって、調べ方も確かさも変わります。

この記事では、画像やWebページ、PDFに使われているフォントを調べる方法と、名前が見つからないときに似た書体を探す考え方を、初心者向けに解説します。

フォントを調べる方法の基本

まずは、フォントを調べるとはどういうことか、そして調べる前に確かめておきたいポイントを押さえましょう。

フォントを調べるとは

フォントを調べるとは、見かけたデザインの文字にどのフォント(書体)が使われているかを特定することです。

書体は文字のデザインの系統のこと、フォントはそのデザインをパソコンやスマホで使えるようにしたデータのことです(違いはフォントと書体の種類で解説しています)。

調べ方は、文字が「どんな形で手元にあるか」で大きく3つに分かれます。

調べたいもの	主な調べ方	結果の確かさ
Webページの文字	ブラウザの開発者ツールや拡張機能で、表示に使われているフォント名を見る	高い(実際に使われた名前が分かる)
PDFやデザインデータ	PDFの文書のプロパティや、デザインツールのフォント表示を見る	高い(データに記録された名前が分かる)
画像・写真の文字	画像からフォントを探すサービスやアプリで候補を出す	候補止まり(よく似た別のフォントが出ることもある)

文字がデータとして残っているWebページやPDFは、フォント名がそのまま記録されているので、正確に調べられます。

一方、画像になった文字は形しか残っていないため、形が似ているフォントを「候補」として探すことになります。

調べる前に「文字か画像か」を確かめる

フォントを調べる前に、まずその文字がデータとしての文字なのか、画像なのかを確かめましょう。

どちらなのかで、使える方法がまったく変わるからです。

見分け方は簡単で、マウスでドラッグして文字を選択(反転)できれば、データとしての文字です。

Webページでも、バナーやロゴ、写真の上に載ったキャッチコピーは画像になっていることが多く、選択しようとすると画像全体が選ばれます。

選択できる文字ならWebページやPDFの方法で、選択できない文字なら画像から調べる方法で進めます。

フォントを調べる具体的な方法

ここからは、Webページ・画像・PDFやデザインデータのそれぞれでフォントを調べる方法と、名前が見つからないときの探し方を紹介します。

Webページのフォントを調べる

Webページの文字は、ブラウザに最初から入っている開発者ツールを使うと、実際に表示に使われているフォント名が分かります。

開発者ツールとは、Webページの裏側の仕組み(HTMLやCSS)を確認するためのブラウザの機能のことです。

開くと英語やコードが並んだ画面が出てきますが、見るだけならWebページや自分のパソコンが壊れることはありません。

うっかり中の数値を書き換えても、変わるのは自分の画面の表示だけで、ページを再読み込みすれば元に戻ります。

Google Chrome:文字を右クリックして「検証」を選び、「計算済み(Computed)」タブの下にある「Rendered Fonts」を見る(Chrome for Developers(英語))。
Firefox:ページインスペクターを開き、CSSの欄にある「フォント(Fonts)」タブを見る。
選んだ要素のフォントに加えて、ページ全体で使われているフォントの一覧も確認できます(Firefox Source Docs(英語))。
拡張機能:Chromeの無料の拡張機能「WhatFont」を入れると、文字にマウスを合わせるだけでフォント名を確認できます。

CSSのfont-familyには候補のフォントが複数並んでいることが多いので、「実際にどれが使われたか」が分かるRendered FontsやFirefoxのフォントタブを見るのが確実です。

Chromeでの詳しい手順や、文字サイズ・行間などの数値の確かめ方は、文字の分析・模写とはの「Webサイトなら実際の数値を確かめられる」で解説しています。

画像からフォントを調べる

バナーや写真のように画像になった文字は、画像をアップロードするとよく似たフォントを探してくれるサービスで調べます。

ここで注意したいのは、欧文(アルファベット)だけに対応したサービスと、日本語に対応したサービスがあることです。

欧文向けのサービスに日本語の画像を読み込んでも正しい候補は出ないので、調べたい文字に合わせて選びましょう。

サービス	対応する文字	使い方・料金など
WhatTheFont(MyFonts)	欧文のみ	Webサイトで画像をアップロードして使う。 iPhone・Android向けの無料アプリもある
Adobe Fonts のビジュアル検索	欧文のみ	Adobeアカウントでサインインして使う。 Adobe Fontsのフォントから候補が出る
画像でフォント検索(モリサワ)	日本語	ブラウザで画像をアップロードして使う(β版)。 Morisawa Fontsの日本語フォントから候補が出る

WhatTheFontのアプリは、App Storeの説明で欧文フォントのみが対象と案内されています(App Store「WhatTheFont」)。

Adobe Fontsのビジュアル検索も、公式ページで「現在はラテン文字(欧文)に対応し、ほかの文字体系では正確な候補を出せない」と説明されています(Adobe Fonts「Visual search」(英語))。

Adobe Fontsには、5,000以上のフォントを使える無料のプランもあります(Adobe Fonts(英語))。

日本語の文字を調べたいときは、モリサワの「画像でフォント検索」が使えます。

画像をアップロードし、調べたい文字の範囲をトリミングで指定すると、似ている順にフォントの候補が表示される仕組みです(モリサワ「画像でフォント検索」β版のお知らせ)。

ただし、候補として出るのはMorisawa Fontsに入っている日本語フォントなので、ほかのメーカーのフォントが使われている場合は、形の近いモリサワのフォントが出てきます。

どのサービスも、画像の質によって結果が大きく変わります。

MyFontsのFAQでは、1種類のフォントだけが写っていること、文字の高さが100ピクセル以上あること、文字同士がくっついていないこと、文字ができるだけ水平であることが、よい結果を得るための条件として挙げられています(MyFonts「FAQ」(英語))。

Bakery

OK 見本A:1種類のフォントの1行だけを、大きく水平に切り取っている

BIG SALE summer

NG 見本B:種類の違うフォントが同じ範囲に入っている

Bakery

NG 見本C:文字が傾き、小さく、文字同士がくっついている

見本Aのように、調べたいフォントの1行だけを大きく、まっすぐに切り取ると、候補が絞り込まれやすくなります。

見本Bのように複数のフォントが混ざっていたり、見本Cのように傾いて文字がくっついていたりすると、サービスが文字の形を正しく読み取れず、的外れな候補が出やすくなります。

こうしたサービスは、切り取った範囲に写っている文字の形を手がかりに候補を探すので、違うフォントが混ざると、どちらの形に合わせて探せばよいかが定まらなくなるためです。

調べたい文字のまわりの余計な部分は思い切って切り落とし、文字が画像の大部分を占めるようにするのがコツです。

写真で撮る場合も、なるべく正面から撮り、調べたい部分だけをトリミングしてからアップロードしましょう。

PDFやデザインデータからフォントを調べる

PDFやIllustrator・Figmaのデザインデータには、使われているフォントの名前が記録されているので、画像から推測するより確実に調べられます。

チラシのPDFや、受け取ったデザインデータのフォントを知りたいときは、次の方法を試しましょう。

PDF(Adobe Acrobat):「文書のプロパティ」の「フォント」タブに、その文書で使われているフォントの一覧が表示されます(Adobe ヘルプ(英語))。
文書のプロパティは、Macでは「ファイル」メニュー、Windowsでは「メニュー」から開きます。
Illustrator:「書式」メニューの「フォントの検索と置換」を開くと、ドキュメントで使われているフォントが一覧で表示されます(Adobe ヘルプ「フォントの検索と置換」)。
Figma:テキストレイヤーを選択すると、右サイドバーにフォント名が表示されます。
自分のパソコンに入っていないフォントが使われている場合は、欠落フォントのアイコンが表示され、どのフォントが足りないかを一覧で確認できます(Figma ヘルプ「欠落しているフォントの管理」)。

PDFのフォント名は「KozGoPr6N-Regular」のように、普段目にするフォント名とは少し違う、英数字の名前(PostScript名)で表示されることがあります。

その場合は、表示された名前をそのまま検索すると、どのフォントのことか見当がつきます。

なお、文字を図形に変換(アウトライン化)したデータや、画像として貼り込まれた文字には、フォント名が残っていません。

アウトライン化とは、文字を「打ち直せる文字」から「文字の形をした図形」に変えることです。

受け取った相手のパソコンに同じフォントが入っていなくても見た目が変わらないように、印刷用のデータやロゴでよく行われます。

図形になると文字としての情報がなくなるので、フォント名を調べることも、文字を打ち直すこともできなくなります。

その場合は、画像から調べる方法や、次に紹介する形の特徴から探す方法を使います。

見つからないときは形の特徴から似た書体を探す

ツールで調べても名前が分からないときは、文字の形の特徴を自分で見て、似た書体を探すという考え方に切り替えましょう。

同じフォントが見つからなくても、特徴が近い書体を選べば、デザインの雰囲気はかなり再現できるからです。

形の特徴は、次の順番で大きな分類から細かい部分へと絞り込んでいくと、迷いにくくなります。

見る順番	見るところ	分かること
1. 大きな分類	和文なら横線の端に三角の飾り(うろこ)があるか、欧文なら線の端に小さな出っ張り(セリフ)があるか	明朝体かゴシック体か、セリフ体かサンセリフ体か
2. 太さ	線が細いか太いか、縦と横の線で太さに差があるか	どのウェイト(太さ)に近いか
3. 角の形	線の端や角が丸いか、四角いか	丸ゴシック体のような丸みのある書体か
4. 文字の幅	文字が縦長か、横に広いか	幅の狭い書体か、広い書体か
5. 特徴的な文字	欧文なら「a」「g」「R」、和文なら「あ」「ふ」など、書体ごとに形の差が出やすい文字	同じ分類の中で、どの書体に近いか

たとえば、同じ文字でも書体が違うと、線の端や太さにはっきりした差が出ます。

あ永

見本D:明朝体。横線が細く縦線が太く、横線の端に三角の飾り(うろこ)がある

あ永

見本E:ゴシック体。線の太さがほぼ均一で、飾りがない

Rag

見本F:セリフ体。線の端に小さな出っ張り(セリフ)がある

Rag

見本G:サンセリフ体。線の端に出っ張りがない

見本Dと見本Eは和文の明朝体とゴシック体、見本Fと見本Gは欧文のセリフ体とサンセリフ体で、どちらも線の端を見るだけで分類の見当がつきます。

見分け方の詳しいポイントは、明朝体とゴシック体の違いとセリフ体とサンセリフ体の違いで解説しています。

分類と太さの見当がついたら、Google Fontsなどのフォントサービスで分類や太さを絞り込んで、近い書体を探しましょう。

手書き風やレトロ風など個性の強い文字の場合は、装飾書体の中から雰囲気の近いものを探すのが近道です。

実践のポイント

フォントを調べるときに陥りやすい間違いと、よくある疑問をまとめます。

注意点・よくある間違い

調べたフォントを、利用条件を確認せずにそのまま使ってしまう。
フォントごとに、商用利用やWebでの使用、ロゴへの使用などの条件が決められているので、使う前に必ず各フォントの規約を確認しましょう(確認のポイントはフォントライセンスで解説しています)。
ロゴの文字も、どこかに同じフォントがあると思い込んでしまう。
ロゴは既存のフォントの形を加工していたり、一から描かれていたりすることが多く、調べても完全に一致するフォントが見つからない場合があります。
画像検索サービスの一番上の候補を、正解だと決めつけてしまう。
出てくるのはあくまで「よく似たフォント」なので、特徴的な文字の形を見比べて確かめましょう。
開発者ツールで見たフォント名が、すべての人に同じように表示されていると思ってしまう。
Rendered Fontsに出るのは自分のパソコンで実際に使われたフォントなので、パソコンやスマホの種類によって表示されるフォントが違う場合があります。
仕事の資料など、外に出してはいけない画像をそのままアップロードしてしまう。
アップロードした画像はサービスの運営会社のサーバーに送られ、どう扱われるかは各サービスの利用規約やプライバシーポリシーで決まります。
公開前の資料や人の写った写真などは、調べたい文字の部分だけを切り取ってから使うか、使うのを控えましょう。

よくある質問

Q. 日本語のフォントを画像から調べられる?
A. モリサワの「画像でフォント検索」なら、日本語の文字が写った画像から候補を探せます。
ただし、候補として出るのはMorisawa Fontsの日本語フォントだけなので、ほかのメーカーのフォントの場合は「形が近いフォント」として参考にしましょう。
Q. スマホのカメラで街の看板の文字を調べられる?
A. 欧文なら、iPhone・Android向けの無料アプリ「WhatTheFont」で、写真に撮った文字からフォントの候補を探せます。
日本語の場合は、撮った写真をトリミングしてから、ブラウザでモリサワの「画像でフォント検索」に読み込みましょう。
Q. 調べたフォントが有料だったときはどうすればいい?
A. 購入やサブスクリプションの契約をして使うか、分類・太さ・幅などの特徴が近い無料のフォントで代用します。
練習で模写をするだけなら、手元にある近い雰囲気のフォントで十分です(フォントの選び方は見やすいフォントの選び方、ほかの書体との組み合わせ方はフォントペアリングとはで解説しています)。