Web pages consist of various visual elements, although we usually don’t notice them. All we see is text, links, images, and forms, right?
Take a close look at the style of the text on a web page and you may notice that the site might be using multiple fonts to represent the content.
Can you identify those sources? Well, not everyone can. But there are many online services, OCR tools, and extensions that can help you do just that. Most of these services require you to use some tool or enter the URL, or use an image to detect the font, and then you will have to mark the area of the page to identify the style of the text. That’s a lot of hassle, right? What if you don’t want to use them?
Do you know how to identify fonts on any web page without using an extension? Yes, it is possible and don’t worry, you don’t need any technical knowledge for it. All you need is a web browser like Firefox or Chrome.
Browsers have a built-in feature called Developer Tools. If you are using shortcuts and browsing in full screen mode, you may have accidentally touched F12 (which opens Developer Tools), instead of F11 (full screen). That is exactly what we are going to use to identify the sources.
How to identify fonts on any web page using Firefox
1. Visit any web page and right click on the text with the font you would like to identify. (see screenshot above)
2. Click on the “Inspect Element” option from the context menu. This opens the Developer Tools section at the bottom of the page.
3. Find the Fonts tab, which is in the lower right corner of the tools section.
4. Firefox will display the name of the font, its size, line height, spacing, and weight.
Firefox offers more information about the font used in the browser. Scroll down to the Fonts tab and click on the option that says “All fonts on page.” This expands the tab vertically to show all the font types that were found on the current page. Besides this, Firefox also shows you a preview of each font style.
Hover over each font listed and the browser will highlight the text on the web page that uses the font.
This is not required, but if you want, you can use the sliders (or boxes) to adjust the font size, height, and other attributes.
How to identify fonts on any web page using Chrome
1. Follow steps one and 2 of the Firefox section. Chrome loads the developer tools on the right side of the page.
2. Click on the “Calculated” tab.
3. Scroll down until you see the font information (font family, font size, etc.).
The browser displays the font type, size, extension, style, height, and other options. I don’t think Chrome has a way to display the information about all the fonts on the web page like Firefox does.
Once you have found the font type, you can use your Google-fu skills to get the font from third party websites. If you find the above steps complicated, you can use an extension like Font Finder which simplifies the task a bit.
I came across this hack on reddit while looking for a font identification tool. But this method turned out to be simple and effective.