5 ways to Identify Fonts in a Web Page

Published by Rob Hope in Landing Page Tutorials, on 20 May 2018

So you are doing your thing browsing the web and stumble upon the illest font combo but you can’t identify the typeface? Well in this video (and list round-up below) I show you exactly how to find those fonts…

1. Fontanello (Chrome, Firefox, Edge + iOS)

Fontanello Chrome, Firefox, Edge and iOS Extension, in my opinion, is the quickest way to find out what font a webpage is using. You simply right click on the text, find Fontanello in the menu and pow there is the font family and some additional attributes.

2. WhatFont (Chrome and Safari)

WhatFont Chrome and Safari Extension is my favorite option when it comes to font discovery. To activate the tool you must click the What Font icon in the browser menu. Now you can select multiple parts of text allowing a better visualization of the font breakdown vs Fontanello.

3. Visual Inspector (Chrome)

Visual Inspector Chrome Extension offers a bit more depth than the above two. You simply click the Visual Inspector icon in the Chrome menu to activate the tool, then head over to the Typography section in the dropdown. You are now presented with the font families used with an additional breakdown of all the typography within the webpage.

4. Good old Code Inspection (All Browsers)

So if you’re trying to avoid installing dozens of browser extensions, we can find more about the fonts used through a good old code inspection:

If you are using Google Chrome, right click on the mystery text, select Inspect. DevTools pops up, make sure you are on the Styles tab and head to the Font-Family attributes to learn more about the fonts.

If you are using Firefox, right click the text, select Inspect Element. Their inspector pops up, now head to the convenient Fonts tab for the info you need.

If you are using Safari, make sure the Developer menu is visible by checking the box at the bottom of the Advanced tab of Safari preferences. Now right click the text, select Inspect Element. Open up the details sidebar if it’s closed and select the Styles – Computed option. The font-family section will present the font info within the style attributes.

5. Uncover Renamed Fonts (advanced method)

An obstacle we can face is when a font family isn’t clearly named, naturally throw off font inspection tools and methods. We start the salvage mission by actually downloading the font.

There are several ways to do this but I start by noting the current font name. Now open up the Inspector tool (I’m using Google Chrome), head to the Application Tab and scroll to the Frames section and open up Fonts. We need to match the file name with the font name noted earlier. Now open that font in a new tab to download it. Finally we drag that font file into the awesome What Can My Font Do? website and bam, the font info is presented beautifully.

Much love,
Rob

Twitter: @robhope
Email: [email protected]