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

Simon Sterne.
August 09, 2023

You know how it is - you’re browsing online, not even thinking about work, and then bam, there it is, a gorgeous typeface. You just have to have it!

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:

Source Code

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.

WhatFont

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.

Fontanello

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.

Fonts Ninja

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.

Font Finder

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.

Rapid Font Finder

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.

What The Font

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 Squirrel

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.

Font Spring

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.

What Font Is

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.

Identifont

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.

Read Next

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…