フォントレンズ

無料のChrome拡張機能

何のフォント？ 右クリックしてCSSを確認

Webサイトの文字を選択して右クリックし、「Inspect font with FontLens」を選びます。ページ上に開くフォント調べツールで、フォントファミリー、サイズ、太さ、行の高さ、色を確認。コピーできるCSSとフォントのダウンロードボタンも表示します。

Chromeに追加 — 無料

Edge、Brave、Opera、その他のChromiumブラウザでも動作します。

フォントレンズの画面。大文字の高さ、xハイト、ベースラインのガイド間にあるAgの見本と、フォント情報、Tailwindコード

基本情報

できること
選択した文字のフォントファミリー、サイズ、太さ、行の高さ、色と、初期値と異なるスタイルを表示。CSSもすぐにコピーできます。
使い方
文字を選択して右クリックし、「Inspect font with FontLens」を選びます。選択中の文字があるときだけメニューに表示されます。
コピー形式
CSS、SCSS、SASS、Tailwind。サイズの単位はpx、rem、pt、emから選べます。
フォントファイル
「Download font」で@font-faceの配信元からWebフォントを取得します。利用前にフォントのライセンスを確認してください。
対象ユーザー
Webデザイナー、フロントエンド開発者、アクセシビリティ監査担当者、CSSを学ぶ方。
価格
無料。アカウント登録不要、有料版もありません。
データ
ブラウザ内で動作します。サーバーもアクセス解析もありません。通信するのは自分で開始したフォントのダウンロードだけです。
対応ブラウザ
Chrome Web StoreからインストールできるChromeおよびその他のChromium系ブラウザ。Firefox、Safariでは動作しません。
制限事項
Webページ上のテキストのCSSを読み取ります。画像、canvas、PDF内の文字やChrome独自のページは対象外です。
バージョン
2.2.0、2026年10月23日に更新

2クリックでフォントを確認

  1. 1

    文字を選択

    Webページ上の見出し、段落、ボタンのラベルなどを選びます。

  2. 2

    右クリック

    「Inspect font with FontLens」を選びます。ページ上に開き、ファミリー、サイズ、太さ、行の高さ、色を表示します。

  3. 3

    コピーまたは調整

    CSSやTailwindをコピー。ライブプレビューでサイズや色を試すか、フォントファイルをダウンロードします。

こんなときに便利

Aa

書体名を調べる

気になる見出しを選択して、フォントファミリーや太さ、配信元（Google Fonts、Adobe Fonts、サイト独自）を確認できます。

{ }

デザイン案と見比べる

公開中のページとデザインファイルの数値を比較して、CSS、SCSS、SASS、Tailwindのルールをコピーします。

4.5:1

コントラストを確認

コントラスト比とAA、AAAの基準を確認。公開前に文字を濃くしたり背景を明るくしたりして試せます。

主な機能

  • ガイド付きフォント見本

    フォントスタックの先頭にあるファミリーを表示。実際のフォントから計測した大文字の高さ、xハイト、ベースラインのガイド付きです。

  • コード形式

    CSS、SCSS、SASS、Tailwindに対応。コード全体または1行をコピーでき、最後に使った形式を記憶します。

  • 好みの単位

    入力欄とコードでpx、rem、pt、emを表示できます。remはページ固有のルートサイズを基準にします。

  • フォントの配信元

    Google Fonts、Adobe Fonts、自前のサーバー、パソコンにインストール済みのシステムフォントを表示します。

  • コントラスト確認

    通常サイズと大きな文字のコントラスト比をAA、AAAの基準とともに表示。色を変えると数値も更新されます。

  • フォントをダウンロード

    @font-faceの配信元からファイルを取得し、ファミリー名で保存します。サーバーがブロックした場合は配信元を新しいタブで開きます。

DevToolsでフォントを調べるのに時間がかかる理由

ページにはフォントの候補が並び、ブラウザは利用できる最初のフォントを使います。どれが使われたか調べるには、DevToolsを開いて要素を探し、Computedパネルを確認してからNetworkパネルでフォントファイルを探します。サイズ、太さ、行の高さ、色も別々の場所にあります。

フォントレンズは選択した文字の計算済みスタイルを読み取り、ファミリーの一覧、先頭のフォント見本、各数値、配信元、CSSを1つのパネルに表示します。ページのCSSを読む仕組みなので、画像内のフォント名は特定できません。

データはブラウザの外に送信されません

  • アカウントもサーバーも不要

    フォントレンズはブラウザ内で動作します。アクセス解析やトラッキングはありません。

  • 選択した文字だけを読み取り

    右クリックした文字のスタイルを読み取ります。ページの情報を外部に送信することはありません。

  • 4つの権限

    右クリック項目のコンテキストメニュー、パネルを開くためのアクティブタブとページへのアクセス、サンプル文字・単位・コード形式の保存に使います。

Chrome DevToolsとフォントレンズ

Chrome DevToolsとフォントレンズChrome DevToolsフォントレンズ
文字のフォントを確認要素を探してComputedパネルを開く文字を選択して右クリック、メニューを1つ選ぶ
TailwindやSCSSでコピー値を1つずつコピーCSS、SCSS、SASS、Tailwindのタブ
フォントの配信元Networkパネルでフォントファイルを探すGoogle Fonts、Adobe Fonts、自前のサーバー、システムを表示
フォントファイルのダウンロードNetworkまたはSourcesで探して保存ボタン1つ
コントラスト確認Stylesパネルのカラーピッカーライブプレビュー横にAA、AAAの基準を表示
価格標準搭載無料

よくある質問

Webサイトで使われているフォントを調べるには？

フォントレンズをChromeに追加し、サイト上の文字を選択して右クリックし、「Inspect font with FontLens」を選びます。ファミリー、サイズ、太さ、行の高さ、色、配信元がわかります。

WebサイトのフォントのCSSをコピーするには？

パネルでCSS、SCSS、SASS、Tailwindのタブを選び、「Copy all」を押します。1行だけコピーすることもできます。必要に応じて単位をpx、rem、pt、emに切り替えてください。

Webサイトからフォントをダウンロードできますか？

Webフォントを使っている文字なら、「Download font」で@font-faceの配信元から取得できます。システムフォントはダウンロードできません。自分のプロジェクトで使う前にライセンスを確認してください。

画像やPDFのフォントも特定できますか？

できません。Webページ上のテキストのCSSを読み取るため、画像、canvas、PDF内のフォント名は調べられません。

WCAGに沿って文字のコントラストを確認するには？

プレビューに文字色と背景色のコントラスト比が表示され、通常サイズと大きな文字のAA、AAA基準も確認できます。どちらかの色を変えると基準表示も更新されます。

pxではなくremでサイズを表示できますか？

はい。単位をpx、rem、pt、emから選ぶと、入力欄とコードに反映されます。remはページのルートフォントサイズを基準に計算され、選択も保存されます。

無料ですか？データは収集されますか？

無料で、アカウントも不要です。サーバーやアクセス解析はなく、自分で開始したフォントのダウンロードだけが通信します。

Edge、Brave、Operaでも使えますか？

多くのChromiumブラウザはChrome Web Storeから拡張機能をインストールできます。Edge、Brave、Opera、Vivaldiも対応します。FirefoxとSafariには対応していません。

PYROCTALの他の無料拡張機能

このフォントは何？2クリックで確認。

Chromeに追加 — 無料