フォントを検索・特定する方法｜画像・Webサイト・日本語の調べ方

フォントを検索・特定するときは、最初に「画像の文字」「Webページの文字」「似た書体を選びたい」のどれかを分けます。画像用の検索ツールと、Webページの文字を調べるツールでは、できることが異なります。

この記事では、2021年公開の内容を編集部が確認し直し、画像検索、ブラウザでの確認、試し書きの使い分けを整理しました。候補が見つからないときの見直し方や、利用前の確認も紹介します。料金、対応言語、ログイン条件は変更されることがあるため、各公式案内も確認してください。

調べたい文字の状態で方法を選ぶ

選択できるテキストならブラウザ、写真やスクリーンショットなら画像検索が出発点です。まだ名前が分からず雰囲気から探したいときは、候補の試し書きを比べます。

画像検索で名前が出ても、元の書体が確定したとは限りません。変形、縁取り、文字間隔などが加わっている可能性もあるため、同じ文字列で照合します。

画像から候補を探す方法

画像の中の文字は、フォント名を含むテキスト情報として調べられないことがあります。まず、文字の形を基に候補を出す方法を試します。

WhatTheFont：画像から名前や似た候補を探す

MyFontsのWhatTheFontは、文字の画像をアップロードしてデータベースの候補と比較するツールです。候補のプレビューで自分の文字列を確認できます。

写真を使う場合は、調べたい文字が大きく、背景と区別できる範囲を選びます。複数の書体が混ざっている画像は、対象を分けて調べる方が比較しやすくなります。検索できる範囲と、フォントを実際に使用するための購入・ライセンス条件は別に確認してください。

Photoshopのマッチフォント：編集作業の中で候補を探す

Photoshopの公式案内では、画像内の文字を長方形選択ツールで選び、「テキスト／マッチフォント」から類似フォントを表示する手順が紹介されています。画面表記はアプリのバージョンや言語によって確認してください。

対象の書体が必ず特定できるわけではありません。対応範囲と候補を実際の画像で確認し、見つからなければ試し書きや制作者への確認へ進みます。

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

ブラウザ上の選択できる文字は、CSSや描画情報から調べられます。画像化された見出しやロゴは、同じ方法で特定できない点に注意します。

WhatFont：文字にカーソルを合わせて調べる

Chrome拡張機能のWhatFontは、Webページの文字にカーソルを合わせたり、クリックしたりして書体やスタイルを確認するツールです。

拡張機能を使う場合は、公式掲載先と必要なアクセス権限を確認します。会社の端末で導入が制限されている場合は、その運用に従い、追加導入せずに使えるブラウザの機能を検討してください。

Chrome開発者ツール：指定と実際の表示を分ける

Chromeでは対象の文字を検証し、ElementsのComputedから表示に関する情報を調べられます。Rendered Fontsでは、選択した要素に使われた書体を確認できます。

CSSのfont-familyに複数の名前が並んでいるとき、先頭の書体がすべての文字に使われているとは限りません。日本語と英数字で別の書体が表示されることもあるため、調べたい文字を含む範囲を確認します。

日本語は同じ文字列で試し書きする

名前の候補が出たら、実際に使いたい日本語で比べます。ひらがな、カタカナ、漢字、英数字のどれかだけが似ていても、文章全体の印象は異なることがあります。

「ためしがき」は、日本語のフリーフォントを探すためのサイトとして公開されています。候補の比較先の一つとして使い、採用時には各フォントの配布元と利用条件も確認します。試し書きサイトに掲載されていることだけで、用途を問わず利用できるとは判断しません。

候補を照合するときは、次の点を見比べてください。

• 使いたい漢字や記号が収録されているか
• 同じ文字列を同じ程度の大きさで並べたか
• 縦線・横線の太さ、文字のふところが近いか
• はね・はらい・終筆の形が近いか
• 句読点と英数字のバランスが合うか
• 太さや字間を調整しただけの違いではないか

Webページで採用する場合は、文字の見た目に加え、スマートフォンでの読みやすさやフォント配信方法も検討します。Webデザインのフォント選びも参考にしてください。

特定できないときの確認順

一つのツールで候補が出ないことだけで、特殊なフォントだと決める必要はありません。画像の条件、検索対象、文字自体の加工を順に確認します。

1. 文字が小さすぎないか、傾きや背景で形が読みにくくないか確認する
2. 複数の書体が混ざっていれば、調べる部分を分ける
3. 日本語と英数字を分けて候補を照合する
4. 太さ・字間・変形の違いを確認する
5. ロゴや独自に描かれた文字なら、制作者や元データの管理者へ確認する

生成AIに候補を尋ねる場合も、提示された名前だけで確定しません。実在する書体か、同じ文字がどう表示されるかを配布元などで確認する、という使い方にとどめます。

フォントが分かったら利用条件を確認する

特定できたことと、自分のWebサイトや制作物で使えることは別です。商用利用、Webへの埋め込み、ロゴ、画像化、データの共有など、用途に合う条件を確認します。

検索ツールの利用料金と、検索結果に出たフォントの利用料金も区別します。検索機能の料金・登録条件はサービスによって異なるため、公式案内で現在の条件を確認してください。

まとめ

フォントを検索するときは、画像、Webテキスト、候補比較を分けると手順を選びやすくなります。候補を同じ文字列で照合し、最後に利用条件まで確認してください。

企業サイトで文字の読みやすさやデザインを見直したい方は、ホームページ制作の対応範囲をご覧ください。現在のサイトと気になる表示を、HP制作・改修の相談で共有いただけます。

参考・出典

機能の紹介は以下の公式案内を確認しています。サービスの利用画面での検索・購入試験をすべて行ったという意味ではありません。

• MyFonts：WhatTheFont
• Adobe：Photoshopのマッチフォント
• Chromeウェブストア：WhatFont
• Chrome DevTools：Rendered Fontsに関する案内
• ためしがき