Webサイトの使用フォントを調べる：宣言フォントスタックを表示

サイトで見かけた書体の名前を知りたいとき、Webサイトの使用フォントを調べるツールを探すことでしょう。テキストにポインターを合わせると、Typographyセクションに、ページが宣言しているフォントファミリーがサイズ、太さ、行の高さとともに表示されます。これは宣言されたフォントスタックであり、ブラウザーが実際にどのフォントで描画したかを確認するものではありません。SuperchargeInspectはページ上のライブテキストを読み取るため、スタイルを一度に確認してコピーできます。

使用フォントを調べるツールでわかること

ページのフォントスタイルを検証すると、Typographyセクションにすべての情報がまとめて表示されます。任意のテキストにポインターを合わせると、まずフォントファミリーが表示されます。ラベルには、リストの最初のファミリーが表示されます。そのラベルをクリックするとfont-familyがコピーされ、宣言されたフォントスタック全体がクリップボードに入ります。

Sizeの項目には、16 / 24のように、フォントサイズとスラッシュの後に行の高さが表示されます。ワンクリックで、両方を16px / 24pxとしてまとめてコピーできます。Weightは独立した値として表示され、Trackingには文字間隔が表示されます。

このセクションには、要素自体のフォントで描画されるサンプルも、視覚的なプレビューとして表示されます。これは書体の見た目のプレビューであり、ブラウザーが使用したフォントを確認するものではありません。値を確認したら、必要なものをクリックしてください。

描画フォントではなく宣言スタックを表示

フォントスタックとは、ページが要求するファミリーを順番に並べたリストです。最初のファミリーが最初に試されます。それが利用できない場合、ブラウザーはリストの次のファミリーへ進みます。このリストが、font-familyの値に含まれる内容です。

SuperchargeInspectはそのリストを表示します。ブラウザーが最終的にどのファミリーを使用したかは確認しません。そのため、最初のファミリーの読み込みに失敗してブラウザーが別のファミリーにフォールバックした場合でも、ラベルには最初のファミリーが表示されます。Webサイトの使用フォントを調べるツールが示すのは宣言された値であり、描画結果ではありません。

読み取るのはページ上のライブテキストのみです。画像からフォントを読み取ることはありません。

フォントをコピーする

フォントはいくつかの方法で取得できます。Familyラベルには最初のファミリーが表示され、コピーするとリスト全体を取得できます。

実際に使うのはスタック全体です。自分のCSSにfont-familyとして貼り付ければ、ブラウザーはページに記載された順番どおりにファミリーを解決します。

キーボード操作

Alt+Shift+Eを押して開始します。矢印キーで要素間を移動します。Ctrlを押しながら上キーまたは下キーを押すと、親要素または子要素に移動します。macOSではCtrlの代わりにOptionを使います。Enterで現在の要素をロックし、Escで選択モードに戻るかパネルを閉じます。マウスで指しにくい小さな入れ子要素にテキストがある場合は、親要素や子要素への移動が便利です。

プライバシー

SuperchargeInspectはネットワーク通信を一切行わず、アカウントも不要です。スタックがデバイスの外に出るのは、自分でどこかに貼り付けたときだけです。

CSSインスペクターで要素の色や余白も確認できます。