典型的なウェブページは一般的にいくつかの異なる要素で構成されており、それらのほとんどは異なる色でコード化され、異なるフォントやスタイルで書かれています。時々、私たちはとても美しくデザインされたウェブページに出くわし、それらが私たちに彼らの属性を深く掘り下げたくなるようにします。非常にエレガントなテーマか、素敵でプロフェッショナルなフォントかもしれません。

フォントの使い方を知っていて、フォントに魅了されている人は、無料のオンラインフォント識別子ツール^{(free online font identifier tools)}を使用して、Web上のフォントを見つけることができます。これらのオンラインツールでは、URLを入力するか、フォントが表示された画像をアップロードしてから検査する必要があります。新しいツールの使い方を学ぶ手間をかけたくない場合は、この投稿が役に立ちます。今日は、ブラウザ拡張機能、アプリケーション、またはオンラインツールを使用せずに、ユーザーが特定のWebページで使用されているフォントを特定する方法について説明します。

この記事で説明する手順は、ほとんどのWebブラウザーが提供する設定、つまり「開発者ツール」^{(Developer Tools)}、具体的には「要素の検査^{(Inspect Element)}」と呼ばれるオプションを中心に展開されます。ここでは、 Chrome^(Chrome)、Edge、Firefoxの2つのブラウザでフォントを識別する方法について説明します。

^(Identify)Firefoxの^(Firefox)InspectElementを使用してWebページ上のフォントを識別します

識別したいフォントのWebページにアクセスし、目的のフォントで書かれているテキストを右クリックします。

表示されるオプションのリスト（コンテキストメニュー）から、[要素の検査^{(Inspect Element)}]をクリックします。これを行う^(Doing)と、ページの下部にある開発者ツール^{(Developer Tools)}が開きます。

[開発ツール^{(Development Tools)}]セクションの右下隅に、[フォント^(Fonts)]という名前の小見出しがあり、それをクリックします。

次に、サイズ、行の高さ、太さなど、調べたいフォントのプロパティが表示されます。また、フォントが斜体であるかどうかも表示されますが、それは常に明らかです。

使用中のフォントについてもっと知りたい場合は、Firefoxでもそれをカバーしています。フォントセクションを下にスクロールして[ページ上のすべてのフォント]をクリックすると、[フォント]タブが展開され、現在閲覧しているWebページで使用されているすべてのフォントとその場所が表示されます。使用されています。それだけでなく、特定のフォントがどのように見えるかをプレビューすることもできます。開発ツール^{(Developer Tools)}のフォントにマウスを合わせると、そのフォントを使用しているWebページのセクションが強調表示されます。

Chromeの^(Chrome)デベロッパーツール^{(Developer Tools)}を使用してフォントを特定する

プロセスは上記のプロセスと同様です。Firefoxの場合と同じように、最初の2つの手順に従って、ページの右側にある開発ツール^{(Developer Tools)}を開きます。

「計算済み」小見出しをクリックします。

少し下にスクロール^(Scroll)すると、興味のあるフォントに関する情報（フォントのファミリ、サイズなど）が表示されます。

残念ながら、Chromeは^(Chrome)Firefoxのように追加情報を提供しません。

^(Identify)Edge開発ツール^{(Edge Developer Tools)}を使用して使用されているフォントを^(Font)特定する

1. オープンエッジ
2. 右クリックしてテキストを選択します
3. [検査]を選択します
4. 開いた開発ツールで、 ^{(Developer Tools)}Computedの下を見てください^(Computed)
5. フォントの詳細が表示されます。

ブラウザの開発者ツール^{(Developer Tools)}を使用できないと思われ、オンラインツールの方が適していると思われる場合は、非常にうまく機能するツールがいくつかあります。

次を読む^{(Read next)}：有料フォントに似た無料の代替品を見つける^{(find similar free alternatives to paid Fonts)}方法。

Identify fonts in Chrome, Edge and Firefox using Developer Tools

Α typical web page generally conѕists of sevеral different elements with most of them coded in different colors and written in different fonts and ѕtyles. Sometimes, we come across web pages so beautifully dеsigned that they make us want to delve deep into their attributes; a very elegant theme or a nice, professional font, perhaps.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• Developer Toolsを使用してWebsiteからFontをダウンロードする方法

• Chrome or Edgeで特定のサイトのための明確なSite Data Developer Toolsを使用して

• Chrome、Edge、Firefox browserにDefault Fontを変更する方法

• EdgeでEdgeを使用してRegistry or Group Policyを使用して無効にします

• Fix Blurry File Open dialog Google Chrome and Microsoft Edgeのボックス

• Chrome or FirefoxでNews and Interests linksを開く方法。 Edgeではありません

• 10 Best Chrome、Edge、および後で読むためにページを保存するための拡張機能

• セキュリティ、Privacy、Cleaning Edge、Firefox、Chrome、Opera

• Chromeのアイコンを隠す方法Chrome、Edge or Firefox

• Full Screen modeのChrome、Edge or Firefox browserを開く方法

• どのようにChrome、Edge、またはFirefoxにテキストのみModeで閲覧します

• 400 Bad Request、Cookie Too Large - Chrome、Edge、Firefox、すなわち

• Chrome、Firefox、EdgeのAdobe Flash、Shockwave、Adobe Flash、Firefox、Edgeを無効にします

• 特定のウェブサイトのためのClear Cookies、Site Data、Cache：Chrome Edge Firefox

• 閉じるChrome、Edge、またはFirefoxで開いたbrowser tabsをすべて閉じる

• Chrome、Firefox、Edgeのブラウザで自動リダイレクトを停止する方法

• 閲覧中のChrome、Firefox、Edge、Edge、Internet Explorerの画像を無効にする

• Windows 10上のブラウザを更新する方法Chrome、Edge、Firefox、Opera

• Create WebページショートカットWindows 10デスクトップでEdge browserを使用して

• Web Notification Web Notification Chrome、Firefox、Edge Browser