What Font Is This? How to Identify Any Font Like a Pro

It could be it’s perfect for something you’re already working on, or maybe it’s one to keep in your toolbox for later. Whatever…you need it in your life. But what is this font? Where can you get it from? How do you find out?

You could spend hours wading through hundreds of type foundries trying to find it, examining font after font until you gradually lose the will to live. Or you could save yourself a lot of time and trouble by using one of the following methods to identify fonts from the web, and from print, easily and quickly.

Of course, if the type is hand-lettering that hasn’t been converted into a font, then it’s unavailable, and you won’t be able to identify it. But if the design uses a font, there are multiple ways to identify it.

The Hard Way: Follow The Code

First up, this is the most protracted method to identify a font and is the closest to manual labor. However, even if you decide to use a browser extension or online tool (more on those later), it’s good to know how to do it this way because you are getting directly to the source — literally, you’re going to look at the source code.

If you haven’t already, it’s time to make friends with the code inspector in your browser. Select some lines of text on a web page, right-click and select inspect from the menu that pops up, and your browser’s code inspector will open. Browsers vary a little, but generally, by default, the inspector will open docked to the browser window you are in. You can change its position or separate it if you want.

What you see should look more or less like this:

Scroll down through the rules section until you find font-family, and there you have it, the name of the font used for that particular piece of text, in this case, ‘basis’. A quick (google) search for ‘basis font’ will take you to Basis Grotesque by Colophon Foundry, which is the font we currently use.

Some browsers have additional tools; for example, Firefox has a Fonts pane that will list all the fonts used on a page, and Chrome’s CSS overview will also give you a list of all the fonts on a page. Occasionally, the font name might be obscured with the font referred to by a class name or variable name, and these extra tools are handy for decoding that.

If you’re not used to using the code inspector in your browser, it’s worth playing around to see what it can do for you. After all, browser developers went to the trouble of making these tools for our benefit: it seems kinda rude not to.

If you’re curious about how other designers/developers do stuff, noodling around in the inspector looking at the source code can be fun. However, if that seems like too much work, or you need answers fast, there are other ways.

The Easy Way: Browser Extensions

These do what you’ve just done, but without you having to drill through the code yourself. You just install the extension and follow its instructions for use.

There are an ever-growing number of these, and different browsers have different extensions, but here are a few suggestions to get you started.

WhatFont

WhatFont is made for Chrome and Safari. After installing it, you click on the WhatFont button in your toolbar to activate it, and you will see the font name appear next to your cursor when you hover over text. Click, and a box opens with more details. Click the x to close, and to turn WhatFont off again, click on the Exit WhatFont button just below your toolbar.

Although the original WhatFont is only for Chrome and Safari, another developer has very helpfully made a wrapper for it to run in Firefox. It provides slightly less information but still gives you the basics of name, size, and line height.

Fontanello

Fontanello is available for Firefox, Chrome, Edge, and iOS (Safari). Once you have installed it and made sure it’s enabled, go to the text you want to identify, right-click to open the dialog box and you should see Fontanello at the bottom. Hover over it and another box will appear with all the font information you need.

Fonts Ninja

Fonts Ninja’s browser extension is the most helpful if you want to acquire a particular font. When you run it you get a tooltip with the full name of the font, the weight used, the size, and the line height.

You also get a separate modal that gives you the name and weight of all fonts on the page. Click the info icon to preview its different weights and styles, and buy, or install it directly if it’s free. Or, you can bookmark it for future reference. Close the modals when you’re done and Font Ninja goes back to sleep.

Font Finder

Font Finder for Firefox and Chrome allows you to select some text, right-click and then choose between analyzing the font, copying the CSS styles for the font, and replacing the font with something else.

Rapid Font Finder

Rapid Font Finder, which is Chrome only, is the simplest of the group. It just gives you the name of the font used for any text the cursor is over. On the plus side, it’s lightweight and fast.

Checking the source code, either manually or with a browser extension, is all very well if you are trying to identify a font used for text on a web page, but what if it’s an image or even print?

The Lazy Way: Ask Someone Else

You could ask the web (aka ‘Google it’), and you might get an answer. But unless it’s a large or well-known company or organization, you’re unlikely to get a satisfactory response. A better approach is to go to a type forum and ask real people who know about fonts.

There are fewer type forums than there used to be, but here are the five that are currently the most active:

MyFonts has a What the Font forum where you can post images of fonts used on t-shirts, mugs, the side of a truck, and just about anything to try to get it identified.

DaFont also has a forum with a dedicated identification board.

Typography Guru is the biggest typography forum, and identification queries tend to get at least some kind of response within a day or two.

On Reddit, you can try the identifythisfont feed. Do not, however, try the typography feed: the first rule is ‘no typeface identification requests.’

Finally, the Adobe Community Type and Typography board will accept identification requests.

While most members of these communities will have a stab at identifying the font in question, more often than not, you’ll be politely (or impolitely) directed to an automatic identification tool.

The Fast Way: Online Identifiers

With most font identifier tools, you upload an image of the font you want to identify, and the tool tells you what it is. To get the best out of these tools, make sure the text in the image is large and clear and that the image is straight with good contrast between the text and the background — it’s a good idea to clean up the sample image in Photoshop before trying to identify it.

What The Font

MyFonts’ What the Font is straightforward to use. You upload an image, select the text you want to be identified in the image, and click ‘Identify Font.’ What the Font will return a list of possible fonts it could be, along with links to buy.

Font Squirrel

Font Identifier by Font Squirrel allows you to upload an image, and then once you have selected the font, you can apply some tweaks to the rotation if necessary.

Font Squirrel offers some good tips on improving the identification process based on the image quality. It will also provide some next-step recommendations if it can’t definitively identify the font for you.

Font Spring Matcherator

Font Spring has a bigger database than Font Squirrel and can identify scripts and calligraphic fonts. Other than that, it’s the same process as Font Squirrel’s Font Finder.

What Font Is

What Font Is guides you through a slightly more complex process that lets you improve brightness and contrast and split any joined characters. It’s free for a basic search, but there is a Pro version if you want more help. You also get a link to post to the What Font Is forum if you’re unhappy with the results.

Identifont

Identifont has been around forever and is still one of our favorite font identification methods: it will try to identify a font based on what you can tell it about the shapes — kind of a 20 questions for fonts.

Identifying a Font

Identifying a font from text is definitely more manageable and more accurate than from an image or description, but these tools are improving all the time. And all of the tools will give you good suggestions, even if they don’t always get it right the first time.

Simon Sterne

Simon Sterne is a staff writer at WebdesignerDepot. He’s interested in technology, WordPress, and all things UX. In his spare time he enjoys photography.