Webサイトが使用しているフォントを知る方法

公開: 2020-05-12

特に魅力的なWebサイトを見たことがあり、Webサイトで使用されているフォントを確認する方法を知りたい場合、答えはブラウザーのインスペクターを開くのと同じくらい簡単です。 ウェブサイトのあらゆる部分がブラウザで解釈されます。 したがって、ブラウザインスペクタを正しく使用する方法を知っていれば、ソースだけでなく、ソースに含まれる画像、ページにある他の要素のCSSプロパティも見つけることができます。

この投稿では、Chromeブラウザインスペクターを使用して、ウェブサイトで使用されているフォントを見つける方法と、それらのフォントを使い始める方法について説明します。 ただし、最初に、アクセス方法と、インスペクターで使用できる機能について説明します。

ChromeInspectorにアクセスする

Chromeブラウザを使用していて、Webサイトを検査したい場合、最初にすべきことは、検査ウィンドウにアクセスすることです。 これを行うにはいくつかの方法があります。

  • F12キーを押すか、
  • 特定の項目を右クリックして、開いたメニューで、[ Inspect ]オプションにアクセスします。 この方法の利点は、問題の要素を直接強調表示することです。
  • キーの組み合わせControl + Shift + I （Windowsの場合）またはCmd + Alt + I （Macの場合）を押すか、または
  • Chromeメニュー（右上のバーに3つのドット）にアクセスする»その他のツール»開発者ツール。

インスペクターウィンドウは、ブラウザーウィンドウ自体に統合して表示することも、別のウィンドウに表示することもできます。 これらのオプションにアクセスするには、インスペクターの右上にある構成アイコン（3つのドット）をクリックし、プロパティ«ドックサイド»の値を変更することでアクセスできます。

ドック側では、インスペクターウィンドウの表示方法を変更できます。
ドック側では、インスペクターウィンドウの表示方法を変更できます。

また、ページコンテンツをコンピューター表示モードで表示するか、モバイルデバイスで表示しているかのように表示することもできます。 インスペクターのトップバーの左側にある2番目のボタンをクリックすると、モバイルデバイスからアクセスしているかのようにコンテンツが自動的に表示されることがわかります。

ページコンテンツの表示モードを選択します。
ページコンテンツの表示モードを選択します。

また、表示するデバイスのタイプ、サイズ、または縦向きモードと横向きモードのどちらで表示するかを指定することもできます。

モバイルデバイスでの表示モードの定義。
モバイルデバイスでのレスポンシブおよび水平表示モードの定義。

インスペクターのメインタブ

ご覧のとおり、インスペクターはさまざまなタブで構成されています。

Googleインスペクターで利用可能なタブ。
Googleインスペクターで利用可能なタブ。

それらのそれぞれから、さまざまな機能と機能にアクセスできます。

  • 要素：ページのHTMLコードと、適用されるスタイルを表示します。 それらを変更して、新しいルールをすばやく追加することもできます。
  • コンソール：ページで発生するさまざまなエラーメッセージと警告メッセージを表示します（画像が読み込まれない、JavaScriptエラーなど）
  • ソース：ページのリソースツリーを表示します。 さまざまなリソースがどこから取得されているかを確認し、それらを変更できます。
  • ネットワーク：ウェブサイトから行われたさまざまなリクエスト、リクエストのコンテンツへのアクセス、取得した応答、回数を表示します…
  • パフォーマンス：実行中のプロセスを示し、ページのパフォーマンスを測定するのに役立ちます。
  • メモリ：Webページのロードおよび実行中に消費されたメモリを示します。
  • アプリケーション：Webアプリケーションで使用されるリソースに関する有用な情報を表示します。
  • セキュリティ：ページからアクセスしたさまざまなサイトとそれぞれの証明書に関する情報を表示します。
  • 監査：エラーをチェックするための監査レポートを生成できます。
  • インスペクターにタブと機能を追加するプラグインがあるため、さらに多くのタブがある可能性があります。 前の画像では、 ReduxDevToolsプラグインがインストールされていることが示されています。

[要素]タブ

ここで、目前の問題に戻りましょう。Webページ上のコンテンツのフォントを知りたかったのです。

前に述べたように、[要素]タブから、現在のページのさまざまな要素のHTMLコードとスタイルにアクセスできます。

GoogleChromeインスペクターの[要素]タブ。
GoogleChromeインスペクターの[要素]タブ。

上の画像でわかるように、左側にはソースコードを表示するメインウィンドウがあります。 右側には、ページのさまざまな要素に適用されているCSSスタイルルールのパネルがあります。

実際、スタイルパネルには3つのタブがあります。

  • スタイル：適用されたCSSルールを表示し、新しいルールを変更および追加できます。
  • 計算済み：要素に適用されているすべてのルールを、要素の境界線、マージン、および塗りつぶしを表すパネルとともに表示します。
  • イベントリスナー：ページで起動されたイベントのツリーと、それらの影響を受けるコントロールを表示します。

アイテムの詳細を表示する

したがって、たとえば、メインのNelio Softwareページに移動し、タイトルからNelio Softwareという単語を選択し、右クリックしてアイテムが何であるかを調べると、インスペクターが開いて上の画像が表示されます。

NelioSoftwareWebサイトのスクリーンショット。
NelioSoftwareWebサイトのスクリーンショット。

インスペクターの画像では、メインウィンドウにタイトルスタイル「NelioSoftware」がh1であることが示されていることがわかります。

この同じウィンドウで、任意の属性またはテキストを右クリックして、それを変更または削除するオプションがあります。 もちろん、ここで行った変更によって元のコンテンツが変更されることはありませんが、ページをデザインしていて、行った変更がどのように見えるかを知りたい場合は、まさに非常に便利なツールです。

ページ上の要素のテキストを編集します。
ページ上の要素のテキストを編集します。

フォントを見る

これで見出しであることがわかりましたが、フォントについてはどうでしょうか。

非常に簡単ですが、インスペクターの[計算済み]タブには、選択したアイテムのすべてのプロパティが表示されます。 font-family属性まで下にスクロールすると、当社のWebサイトの見出しが付いているフォントが正確に見つかります。

選択した要素に適用されるフォント。
選択した要素に適用されるフォント。

また、フォントを変更したい場合にその要素がどのように表示されるかを知りたい場合は、[スタイル]タブに移動し、 font-family属性に移動して、必要な値で直接変更できます。

インスペクターでタイトルのフォントを変更します。
インスペクターでタイトルのフォントを変更します。

フォントタイプが変更されたWebサイトが自動的に表示されます

タイトルフォントが変更されたページ。
見出しのフォントが変更されたページ。

ご覧のとおり、Google Chromeインスペクターは、要素に変更を加えた後に残したデザインを試してみるための非常に快適で使いやすいツールです。

画像のフォントはどうですか？

これまで見てきたように、Google Chromeインスペクターを使用すると、ページ上の任意の要素のプロパティを表示できます。 ただし、Webサイトで画像のフォントを表示したい場合は、インスペクターでこれを表示することはできません。 インスペクターは、ページに挿入された画像のプロパティを表示しますが、その画像のコンテンツの詳細は表示しません。

これを行うために、Font Squirrel MatcheratorやWhatfontis.comなど、画像で使用されているフォントを識別するのに役立つツールがいくつかあります。 これを行うには、両方のツールで画像をダウンロードし（whatfontis.comで画像のURLを指定することもできます）、識別したい文字を含む画像の部分を選択する必要があります。

どちらのツールでも、選択したテキストにほぼ一致するフォントのセット全体が表示されます。 ただし、これが完全に一致していないと思われる場合は、ツールで示されたフォントと同様のフォントをグーグルで検索すると、何が得られるかがわかります。

UnsplashのGemmaEvansの注目の画像。