みなさん、Webサイトを見ていて「このフォントなんて名前なんだろう？」と気になったことってありますよね。
あるいはWeb制作をしているコーダーやデザイナーの方であれば「ちゃんとCSSで指定した通りにフォントが表示されているかな？」と不安になったこと、ありますよね。
今回はそのどちらも完璧に解決する方法をご紹介します。特に拡張機能を入れる必要もなく、信頼度100%の方法ですのでぜひお試しください。ブラウザごとに微妙に方法が異なるので、それぞれ詳しく見ていきましょう。
説明が長くなったのでブラウザごとの説明をそれぞれアコーディオンで閉じています。クリックで開きます。
概要
各種ブラウザには、WebサイトやWebサービスを開発するエンジニア向けに利用される「開発者ツール」というものがあります。デベロッパーツールとも呼ばれます。Web制作に携わっている人ならお馴染みですね。
これを使うことで実際に表示されているフォントの名前などがわかります。
ざっくりいうと、
- 開発者ツールを開く
- フォントを調べたい文字列を選択する
- 「計算済み」もしくは「フォント」タブから適用されているフォント名を確認する
という手順です。
Google Chromeの場合
設定中の動画
細かい解説の前に、まずは設定中の様子をご覧ください。
開発者ツールを開く
メニューから「表示」→「開発 / 管理」→「要素の検証」と選択してください。
他にも、右クリックから「検証」を押す方法や、「Command」 + 「Shift」 +「C」（Mac）、「Ctrl」+「Shift」+「I」（Windows）のショートカットキーで開発者ツールを開き、「コンソール」タブを開いても構いません。
次のような画面が開いたらOKです。
文字の部分を選択する
フォントを調べたい文字の部分を選択します。
1. 選択モードにする：デベロッパーツール左上の「点線四角に左上矢印」アイコンを押して、青色にする
2. 対象の部分をクリックする
3. デベロッパーツール側でさらに要素を開き、文字列部分を選択する
「計算済み」タブを開き、最下部までスクロールするとある「レンダリングフォント」を確認する
ここまでできたら、デベロッパーツール下部の計算済みタブから実際に適用されているフォント名を確認しましょう。
ここまでできたら、デベロッパーツール下部の計算済みタブから実際に適用されているフォント名を確認しましょう。
Microsoft Edgeの場合
設定中の動画
細かい解説の前に、まずは設定中の様子をご覧ください。
開発者ツールを開く
「ツール」→「開発者」→「要素の検査」と進んでください。
他にも、右クリックから「開発者ツールで調査する」を押す方法や、「Command」 + 「Shift」 +「C」（Mac）、「Ctrl」+「Shift」+「I」（Windows）のショートカットキーで開いても構いません。
文字の部分を選択する
フォントを調べたい文字の部分を選択します。
1. 選択モードにする：デベロッパーツール左上の「角丸四角に左上矢印」アイコンを押して、青色にする
2. 対象の部分をクリックし、さらにデベロッパーツール側で文字列部分を選択する
「計算済み」タブを開き、最下部までスクロールするとある「表示されるフォント」を確認する
ここまでできたら、デベロッパーツール下部の計算済みタブから実際に適用されているフォント名を確認しましょう。
FireFoxの場合
設定中の動画
細かい解説の前に、まずは設定中の様子をご覧ください。
開発者ツールを開く
「ツール」→「ブラウザーツール」→「ウェブ開発ツール」と選択してください。
他にも、右クリックから「調査」を押す方法や、「Command」 + 「Shift」 +「C」（Mac）、「Ctrl」+「Shift」+「I」（Windows）のショートカットキーで開発者ツールを開き、「コンソール」タブを開いても構いません。
次のような画面が開いたらOKです。
文字の部分を選択する
フォントを調べたい文字の部分を選択します。
1. 選択モードにする：デベロッパーツール左上の「角丸四角に左上矢印」アイコンを押して、青色にする
2. 対象の部分をクリックし、さらにデベロッパーツール側で文字列部分を選択する
「フォント」タブを開き、フォント名を確認する
ここまでできたら、デベロッパーツール下部のフォントタブから実際に適用されているフォント名を確認しましょう。
Safariの場合
設定中の動画
細かい解説の前に、まずは設定中の様子をご覧ください。
開発者ツールを開く
メニューから「開発」→「Webインスペクタを表示」と選択してください。
他にも、右クリックから「要素の詳細を表示」を押す方法や、「Command」 + 「Option」 +「I」（Mac）のショートカットキーで開発者ツールを開いても構いません。
次のような画面が開いたらOKです。
文字の部分を選択する
フォントを調べたい文字の部分を選択します。
1. 選択モードにする：デベロッパーツール左上の「照準」アイコンを押して、青色にする
2. 対象の部分をクリックする
Safariの場合は文字を含むHTML要素部分を選択してください。
「フォント」タブを開き、フォント名を確認する
ここまでできたら、デベロッパーツールのフォントタブの「固有名」から実際に適用されているフォント名を確認しましょう。
コメント