•  ウェブページで使用しているフォント名を調べる
•  01_ブックマークレットを使用してフォント名を調べる
•  02_ブラウザの開発者ツールでフォント名を調べる
•  03_ブラウザの開発者ツールでフォント名を調べる - Google Chrome
•  04_ブラウザの開発者ツールでフォント名を調べる - Microsoft Edge
•  05_ブラウザの開発者ツールでフォント名を調べる - Firefox
•  06_要素内で複数のフォントが使用されている場合
•  07_フォントの設定を調べた結果のフォント名に変更してみる
•  08_ブラウザの開発者ツールにおける要素の選択操作

ウェブページの記事本文のテキストの描画に使用しているフォント名を調べる方法についての記事です。1 つ目は、拙作の JavaScript のコードをブックマークレットとして使用する方法です。2 つ目は、ウェブブラウザの開発者ツールを使用する方法です。
本ページで説明している方法では、ページのタイトル画像や広告などの画像の一部となっている文字、画像としての文字のフォント、あるいは PDF に埋め込まれている文字のフォントを調べることはできません。

ウェブページ本文のテキスト描画に使用しているフォント名を調べる方法を以下の記事に掲載しています。これは、その機能をブックマークとして登録して利用する方法です。ブックマークへの登録は利用者が行います。このような機能をブックマークレットと言います。

• [04_ウェブページで使用しているフォント名を調べる]

ウェブページの文字 (テキスト) の表示に使用するフォントは、ウェブページの作成者が設定しています。ウェブページの作成者が設定していない場合は、ウェブブラウザのデフォルトのフォント設定が使用されます。

[F5] キーなどの操作でページの再読み込みをしたり、別のページを表示すると、このブックマークレットの機能は無効になります。

以下の 2 行の文字列は、フォント名調査の動作確認用です。1 行目の要素のフォント名リストの先頭には、現実には存在しないフォント名を設定しています。フォント名の設定リストを表示するには、[Ctrl] キーを押した状態でマウスの左ボタンを押します。

Windows 10 の場合、フォント名の設定リストにあるフォントをインストールしていないのであれば、下図のようになります。Arial で描画しているのは ( と ) だけです。

上のブックマークレットは、一般的な日本語の文字の描画に使用されるフォント名を検出するツールです。以下は、日本語としては一般的とは言えない文字の例です。
以下のリンクの記事に、その下の表の文字を掲載しています。この文字を上の説明で使用しているブックマークレットで調べてみます。

• [04_游ゴシックのフォントリンク]

1 番目の文字は「游ゴシック」となっています。この「東」という文字は日本語としては一般的な文字と言えます。Windows 10 であれば游ゴシックで描画されています。

2 番目と 3 番目の文字の結果です。筆者の Google Chrome 127 では sans-serif は Meiryo となっていますが、これらの文字は游ゴシックにも Meiryo にも収録されていません。これらの文字は、フォントリンク (フォントのフォールバック) の機能によつて別のフォントを使用して描画されています。

フォントリンクのシーケンスはフォントと OS によって違いますから、文字の描画に使用するフォントは当然、ブラウザの設定や OS によって異なることがあります。

次項以降では、本ページの目次部分を非表示にした説明用の画像を使用しています。

開発者ツールを起動します。下図では、開発者ツールをブラウザの右端に表示しています。
開発者ツールの左上にある矢印付きのアイコン (エレメント選択) をクリックして、マウスカーソルをページ内の記事本文へ移動します。マウスカーソルの位置が変わるとタグ単位で選択領域が変わります。下図ではページ全体が選択領域になっています。

このエレメント選択操作状態にするショートカットキーは [Ctrl] + [Shift] + [C] です。これはトグル操作になっています。

ページ内の調査対象の文字をクリックします。これで、背景に色が付いているタグ (要素 / エレメント) の情報を取得したことになります。文字の描画に使用しているフォント名を調べるのですが、情報はタグの要素単位です。文字を選択する必要はありません。

開発者ツールのペインで結果を確認します。
開発者ツールの上部の [要素] をクリックしてアクティブにしますが、デフォルトでこのタブがアクティブになっています。
下の方の [計算済み] のタブをクリックします。下の方にスクロールすると [レンダリングフォント] という項目があります。そこの Familiy name が結果のフォント名です。[ローカルファイル] は、現在の閲覧環境にインストールされているフォントです。[ネットワークリソース] はウェブフォントです。

結果のフォント名は、[Ctrl] + [A], [Ctrl] + [C] でコピーできます。

[スタイル] タブをクリックして [フィルタ] の [.cls] (要素クラス) をクリックすると、タグの要素の CSS (スタイルシート) の設定が確認できます。これは、ウェブページの作成者が設定している値です。

クリックした文字、つまり、選択するタグを間違えた場合、あるいは別のタグ文字について調べるには、再度、開発者ツールの左上の矢印付きアイコンをクリックして文字をクリックします。上の図の状態で別の文字をクリックしても結果は更新されません。

開発者ツールを起動します。下図では、開発者ツールをブラウザの右端に表示しています。
開発者ツールの左上にある矢印付きのアイコン (エレメント選択) をクリックして、マウスカーソルをページ内の記事本文へ移動します。マウスカーソルの位置が変わるとタグ単位で選択領域が変わります。下図ではページ全体が選択領域になっています。

このエレメント選択操作状態にするショートカットキーは [Ctrl] + [Shift] + [C] です。これはトグル操作になっています。

ページ内の調査対象の文字をクリックします。これで、背景に色が付いているタグ (要素 / エレメント) の情報を取得したことになります。文字の描画に使用しているフォント名を調べるのですが、情報はタグの要素単位です。文字を選択する必要はありません。

開発者ツールのペインで結果を確認します。
開発者ツール上部の [ </> ] または [ </> 要素] をクリックしますが、デフォルトでこのタブがアクティブになっています。
下の方の [計算済み] のタブをクリックします。下の方にスクロールすると [表示されるフォント]という項目があります。そこの Familiy name が結果のフォント名です。[ローカルファイル] は、現在の閲覧環境にインストールされているフォントです。[ネットワークリソース] はウェブフォントです。

結果のフォント名は、[Ctrl] + [A], [Ctrl] + [C] でコピーできます。

[スタイル] タブをクリックして [フィルタ] の [.cls] (要素のクラス) をクリックすると、タグの要素の CSS (スタイルシート) の設定が確認できます。これは、ウェブページの作成者が設定している値です。

クリックした文字、つまり、選択するタグを間違えた場合、あるいは別のタグ文字について調べるには、再度、開発者ツールの左上の矢印付きアイコンをクリックして文字をクリックします。上の図の状態で別の文字をクリックしても結果は更新されません。

開発者ツールを起動します。下図では、開発者ツールをブラウザの下端に表示しています。
開発者ツールの左上にある矢印付きのアイコン (エレメント選択) をクリックして、マウスカーソルをページ内の記事本文へ移動します。マウスカーソルの位置が変わるとタグ単位で選択領域が変わります。下図ではページ全体が選択領域になっています。

このエレメント選択操作状態にするショートカットキーは [Ctrl] + [Shift] + [C] です。これはトグル操作になっています。

ページ内の調査対象の文字をクリックします。これで、背景に色が付いているタグ (要素 / エレメント) の情報を取得したことになります。文字の描画に使用しているフォント名を調べるのですが、情報はタグの要素単位です。文字を選択する必要はありません。

開発者ツールのペインで結果を確認します。
開発者ツールの矢印付きアイコンの右側の [インスペクタ] をクリックしてアクティブにしますが、このタブがアクティブな状態がデフォルトになっています。
開発者ツールの右側のペインにある [フォント] タブをクリックします。[使用中のフォント] が結果のフォント名です。

結果のフォント名は、[Ctrl] + [A], [Ctrl] + [C] でコピーできます。

[ルール] タブをクリックすると、タグの要素の CSS (スタイルシート) の設定が確認できます。これは、ウェブページの作成者が設定している値です。

クリックした文字、つまり、選択するタグを間違えた場合、あるいは別のタグ文字について調べるには、再度、開発者ツールの左上の矢印付きアイコンをクリックして文字をクリックします。上の図の状態で別の文字をクリックしても結果は更新されません。

上の、ブラウザの開発者ツールを使用した説明では、表の 1 つのセルに 1 つの文字しかありませんでした。本項は、1 つのタグの要素に 1 つの文字だけの場合です。
次の 3 文字は、同じタグ内にに描画しています。この場合について調べてみます。

下図は Google Chrome 127 で調べた結果です。このように、同じ要素内の文字についても実際の描画に使用しているフォント名を知ることができます。ただし、どの文字にどのフォントが使用されているかという個別の情報は取得できません。

実際に文字の描画に使用しているフォント名が分りました。そこで、CSS (スタイルシート) でそのフォント名を設定して文字を描画したのが以下の文字です。1 番目の文字は「あ」に変更してフォント名も Simsun に変更しています。
これらのフォントは、Windows 10 には標準でインストールされています。

本ページの最初で説明したブックマークレットを使用してフォント名を確認してみます。
1 番目の文字は SumSun で描画されています。SumSun には、日本語の一般的な文字が収録されています。2 番目はもちろん SumSun です。3 番目は SimSun-ExtB です。SimSun-ExtB には、日本語の一般的な文字も、一般的な簡体字も収録されていません。和文 : は、このタグの要素内で一般的な日本語の文字を使用した場合に使用されるフォント名です。ここでは serif となっていますので、具体的なフォント名はウェブブラウザの設定によって異なります。

2 番目の文字は、花園明朝A に、3 番目の文字は、花園明朝B には収録されています。

ブラウザの開発者ツール操作で、文字をクリックすることはタグを選択することと述べました。そのことを確認するテストです。以下に、説明用のシンプルなウェブページを用意しました。

• [要素の選択操作説明用ウェブページ]

上のリンクのウェブページには、文字を表示するコードは次の 1 行しかありません。上のリンクのページの HTML コードは、ページを表示した後、[Ctrl] + [U] のキー操作で確認できます。別タブ表示となります。

Google Chrome 127 を使用した説明です。
上のテスト用のウェブページを表示します。開発者ツールを起動したら [要素] をクリックします。<div> の左側に右向きの三角形があります。これをクリックしてコードを展開します。下図は展開した状態です。

開発者ツールの左上の矢印付きアイコンをクリックして、ウェブページの左側の文字の部分をクリックします。開発者ツール側の <div> タグが選択状態になります。

開発者ツールの左上の矢印付きアイコンをクリックして、今度は、ウェブページの Emoji の文字ををクリックします。開発者ツール側の、Emoji の文字がある <span> タグが選択状態になります。

開発者ツールの左上の矢印付きアイコンをクリックして、今度は、ウェブページの右側の文字の部分をクリックします。開発者ツール側の <div> タグが選択状態になります。
このように、選択はタグ単位です。タグの要素内の文字をクリックすると、そのタグが選択状態になります。選択状態になったタグの情報が開発者ツールの各ペインに表示されます。

開発者ツールの左上の矢印付きアイコンをクリックして、ウェブページの文字を選択すると開発者ツール側の選択状態は解除になりますが、最初にクリックした位置に相当するタグの情報は取得できています。例えば、Emoji の文字をクリックした後、下図のように文字を選択しても、取得するのは Emoji の文字部分の要素の情報です。
要素の情報を取得する目的の場合、文字の選択は意味がありません。

上の一連の操作は、目的のタグを選択することです。したがって、開発者ツール側の HTML コード内で目的のタグをクリックして選択しても結果は同じです。