How to find out what font something is

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)

Fontanello Chrome and Firefox 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.

Choosing the proper font for a flier, title page, or even a graphic can be a difficult task. 

Sometimes the standard fonts installed on your operating system just don't cut it, and browsing free font Web sites can be a time sink with no guaranteed results. However, you may see or recall an image with a really awesome font, but have no way of contacting the artist to identify the font used. Here's a good way to identify fonts in images for free.

Step 1: Find a picture with the font you want identified. If the image is online, save it to your computer for the best/fastest results (or use a program like SPGrab to capture a section of the site/image).

Step 2: Open your favorite Web browser and navigate to www.whatfontis.com.

Step 3: Click on the Browse button on the Web page and navigate to the picture you saved in Step 1. If you opted not to save it, enter the URL of the image into the box below (labeled Or specify a URL with the image).

Step 4: Make sure the options below reflect the image you're trying to use and your desired results. It's especially important to make sure the proper background color option is selected.

Step 5: Click on the Continue button to begin identifying.

Step 6: On the next page, examine the images displayed (the more thorough you are the more accurate your results will be). Any time you can identify the highlighted letter, enter it into the text area next to the image.

Step 7: Click on the Continue button at the bottom of the page.

Your results will be displayed on the next page. Links to download/purchase the fonts are provided as well. This way, if you see a close match, you can grab it without having to hunt all over the Internet for the font.

How do I identify a font?

Is there a way to find font from an image?

Is there a tool to identify fonts?

How do I identify a font on Google?