Identify fonts in Firefox and Chrome using developer tools
A typical web page usually consists of several different elements, most of which are coded in different colors and written in different fonts and styles. Sometimes we come across web pages that are so beautifully designed that they make us want to delve deeper into their attributes; a very elegant theme or a nice professional font, maybe.
People who know fonts and are fascinated by them often use free online font identification tools to help them discover fonts on the web. These online tools require you to enter a URL or upload an image with the font presented, which is then inspected. In case you don’t want to go through the hassle of learning how to use a new tool, this article is for you. Today we are going to discuss how users can identify the font used by a particular web page without using any browser extension, app, or online tools.
The procedure we will discuss in this article will revolve around a setting offered by most web browsers, namely ‘development tools, ‘or to be precise, an option called Inspect element. Here we are going to discuss how fonts can be identified in two browsers – Chromium and Firefox.
Identify fonts on a webpage using Inspect Element in Firefox
Visit the webpage of the font you want to identify and right-click on the text written in the font you want to identify.
In the list of options that appear (the context menu), click Inspect Item. This would open the developer tools at the bottom of the page.
In the lower right corner of the Developer Tools section, you will find a subtitle named Fonts, click on it.
It will then display for you the properties of the font you wanted to examine like its size, line height, weight, etc., and also whether the font is italic or not, although this is still apparent.
If you want to know more about the font used, Firefox has you covered as well. If you scroll down to the Fonts section and click on “ All Fonts on Page ”, the Fonts tab will expand and you will see all of the fonts used on the web page you are browsing right now, along with their location. are used. Not only that, but you also get an overview of how a particular font will look. Hovering your mouse over fonts in Developer Tools will highlight sections of the web page that use that font.
Identify a font using developer tools in Chrome
The process is similar to that described above. Follow the first two steps as you did with Firefox to open Developer Tools on the right side of the page.
Click on the “Calculated” subheading.
Scroll down a bit and you will find information about the font you are interested in (font family, size, etc.)
Unfortunately, Chrome doesn’t give you any additional information like Firefox does.
If you don’t think you can’t work with browser developer tools, and online tools would be a better fit for you, there are several that work just fine.
Read more: How to find free alternatives similar to paid fonts.