どのページでもフォントを検査
テキストにカーソルを合わせてクリックすると、ライブの書体、サイズ、ウェイト、スタイル、色を—要素の近くまたはサイドバーで—DevToolsを開かずに確認できます。
what the font - font finder
Webページ上の任意の要素の書体とCSSタイポグラフィ—ファミリー、サイズ、ウェイト、行間、字間、色、コントラスト—を特定し、タブを離れずに必要な情報をコピーまたはエクスポートできます。
ライブタイポグラフィのために
機能
重要なタイポグラフィの詳細
行間、字間、変形、装飾、コントラスト（AAA/AAの目安を含む）を1つのパネルで確認できます。
ワンクリックでCSSをコピー
検査した要素のフォントファミリー、色、またはすぐ使えるCSSスニペットをコピーできます。
ページ上でスタイルを編集
ライブ要素のウェイト、サイズ、間隔、色などを調整し、試し終わったらリセットできます。
ページ内のすべてのフォント
ページ全体のユニークなテキストスタイルをスキャンし、デザインシステムの監査時に素早く切り替えられます。
エクスポートと Google Fonts
タイポグラフィを SCSS または JSON でエクスポートするか、見つけたファミリーの Google Fonts 検索を開けます。
シンプル設計
私たちについて
ライブのタイポグラフィ—書体、サイズ、ウェイト、色、コントラスト—を表示するChrome拡張機能。任意のWebページからフォントを検査、コピー、エクスポートできます。
- —
- 公開利用数合計
- —
- 確認済みレビュー数
Chrome Web Store
ユーザーの声
説明用のサンプルフィードバック — 接続後は Chrome Web Store のレビューに置き換わります。
★★★★★
“DevToolsを開かずに、ライブサイトからファミリー、ウェイト、hex色を取得できます。”
★★★★★
“1つのパネルでCSSとコントラストをコピーできるのは、監査中にまさに必要な機能です。”
★★★★★
“ページ内のすべてのフォントで、ランディングページのタイポグラフィの不整合を素早く見つけられます。”
3つの簡単なステップ
使い方
-
拡張機能をインストール
Chrome Web Store から what the font - font finder を追加し、ツールバーにピン留めします。
-
検査を開始
ポップアップを開き、検査を開始して、ページ上の任意のテキストにカーソルを合わせてクリックします。
-
コピーまたはエクスポート
CSSをコピー、スタイルをエクスポート、Google Fonts を開く、またはページ内のすべてのフォントを閲覧します。
インストール前の疑問にお答えします
FAQ
Webサイトのフォントを特定するには？
what the font - font finder をインストールし、検査を開始してテキストにカーソルを合わせ、クリックしてファミリー、サイズ、ウェイト、色を表示するパネルを開きます。
表示されているテキストのCSSをコピーできますか？
はい。パネルからフォントファミリー、色、または検査した要素のCSSスニペットをコピーできます。
すべてのページで動作しますか？
通常のWebサイトのタブで動作します。Chromeのシステムページや一部の制限付きURLは検査できません。
ページで使われているすべてのフォントを見られますか？
「ページ内のすべてのフォント」を使うと、表示されているユニークなテキストスタイルを一覧し、詳細パネルで開けます。
検査中に見た目を変更できますか？
はい。要素のウェイト、サイズ、間隔、色など関連スタイルを編集し、リセットで元に戻せます。
Google Fonts はどこから開きますか？
ファミリー名が検索可能に見える場合、パネルの Google Fonts アクションでその名前のクエリを開けます。