How to Find the Name of a Font from an Image?

A client sends you a photo of a café menu with the note "we want our new site to feel like this." Or a designer drops a screenshot of a competitor's landing page into Slack with "what font is that headline?" You squint at it: a geometric sans, single-story a, slightly squared dots. It could be one of fifty fonts. Guessing wastes an hour. A methodical approach usually gets you the answer, or a close enough match, in a few minutes.

This article covers the fastest ways to identify a font: reading it straight from a live website, preparing an image so recognition tools can match it, which tools work best in 2026, how to identify a font manually from its letterforms, and what to do when the font is custom or unavailable.

Start Here: Is the Font on a Live Website?

If the text in your image came from a website you can visit, skip the image entirely. The browser already knows the font name.

Use Browser DevTools

1. Right-click the text and choose Inspect.
2. In the Elements panel, open the Computed tab and look at font-family to see what the CSS asks for.
3. Scroll to the bottom of the Computed tab in Chrome or Edge to see Rendered Fonts, which shows the font that actually painted the text, including whether it was a local system font or a downloaded web font.
4. In Firefox, the Inspector's Fonts tab shows the font name, the file URL, and even the variable axis values in use.

This distinction matters. A stylesheet might declare font-family: "Brand Sans", Helvetica, Arial, sans-serif. If the web font failed to load, the rendered font could be Arial, and your screenshot shows Arial, not Brand Sans.

Check the Network Panel

Open the Network panel, filter by Font, and reload. File names like GT-Walsheim-Medium.woff2 or Google Fonts URLs with family=Manrope usually give the answer away. Hosted services such as Adobe Fonts use obfuscated names, but the CSS request often still contains the family name.

Use a Browser Extension

Extensions like WhatFont and Fonts Ninja let you hover over text to see its family, size, weight, and line height. They read the same computed styles as DevTools, just faster.

Preparing an Image for Font Recognition

When all you have is a screenshot, photo, or PDF, automatic recognition tools do the heavy lifting, but their accuracy depends heavily on image quality. Spend a minute cleaning it up:

1. Crop to one line of text in one font. Mixed fonts confuse matchers.
2. Straighten it. Rotate so the baseline is horizontal. Correct perspective if it's a photo taken at an angle.
3. Increase contrast. Aim for dark text on a plain light background. Invert light-on-dark text.
4. Make it big enough. Letters should be at least 50–100 pixels tall. Upscale tiny screenshots before uploading.
5. Remove effects. Shadows, outlines, gradients, and textures interfere with matching.
6. Pick distinctive letters. Lines containing a, g, R, Q, G, y, &, and numerals give matchers more to work with than a word like "mill."

You can do all of this in any image editor, or with ImageMagick from the command line:

# Crop, convert to grayscale, boost contrast, and upscale 3x
magick input.png \
  -crop 1200x180+40+320 +repage \
  -colorspace Gray \
  -level 20%,80% \
  -resize 300% \
  -threshold 55% \
  cleaned.png

Adjust the crop geometry (width x height + x + y) for your image, and try the command without -threshold if the result looks too blocky.

Font Identification Tools

Several tools match an uploaded image against large font databases. None of them is perfect, so it's worth trying two.

Tool	How it works	Strengths	Weaknesses
MyFonts WhatTheFont	Upload image, select text, get matches	Large commercial catalog, good with clean images	Biased toward fonts sold on MyFonts
Font Squirrel Matcherator	Upload image, adjust glyph selection	Includes many free fonts	Less accurate on photos
WhatFontIs	Upload, confirm characters, get matches	Covers free and commercial fonts, shows alternatives	Ads and paywalled features
Adobe Capture / Adobe Fonts visual search	Photograph or upload text	Matches against Adobe Fonts library, good on mobile	Limited to Adobe's catalog
Google Lens	Photograph or upload; ask "what font is this"	Fast, general purpose	Inconsistent; often names popular fonts
Identifont	Answer questions about letter shapes	Works without an image, good for unusual faces	Slower, requires some typographic knowledge

A practical workflow:

1. Upload the cleaned image to WhatTheFont and WhatFontIs.
2. Compare the top five results from each. If a name appears in both, it's a strong candidate.
3. Open the candidate's specimen page and type the exact text from your image.
4. Compare it letter by letter, especially the distinctive characters.

Identifying a Font Manually

When tools fail, which happens often with photos, custom lettering, or obscure fonts, you can narrow it down by looking at specific features. Knowing the anatomy of a letterform makes this much faster.

Step 1: Classify It

Decide the broad category first:

• Serif or sans-serif? See serif vs. sans-serif fonts if you're unsure.
• If serif: are the serifs bracketed (curved into the stem), hairline, or slab? High contrast suggests a Didone or modern; heavy rectangular serifs suggest a slab serif.
• If sans-serif: is it geometric (circular o, like Futura), grotesque/neo-grotesque (Helvetica, Inter), or humanist (calligraphic, like Gill Sans or Fira Sans)?
• Is it monospaced, condensed, extended, rounded, or a script?

Step 2: Check the Diagnostic Letters

Certain letters vary the most between typefaces:

Letter	What to look for
a	Single-story (like a handwritten a) or double-story; shape of the tail
g	Single-story or double-story (with a loop below)
G	Has a spur or not; horizontal bar or not
R	Straight or curved leg; where the leg joins the bowl
Q	Shape and angle of the tail
t	Slanted or flat top; curved or straight foot
y	Straight or curved tail
M	Splayed or vertical sides; does the middle reach the baseline
1	Flag, base serif, or plain stroke
&	Traditional or Et-style ampersand
i, j	Round, square, or angled dots

Step 3: Look at Proportions

• X-height: tall (Verdana, Inter) or short (Garamond, Futura)?
• Width: are round letters like o close to circles, or narrower ovals?
• Terminals: are the ends of strokes cut horizontally, vertically, or at an angle?
• Stroke contrast: uniform or varying thickness?

Step 4: Search with What You Found

Use these observations as filters. Google Fonts lets you filter by category and properties. Identifont asks precisely these questions. Searching "geometric sans single story a square dots" often gets you surprisingly close.

When You Can't Find an Exact Match

Sometimes the text isn't a font at all, or the font isn't available:

• Custom lettering. Logos and hand-lettered signage are often drawn by hand or heavily modified. No tool will find them, because there's nothing to find.
• Custom brand fonts. Many large companies commission proprietary typefaces that aren't for sale.
• Modified fonts. A designer may have adjusted spacing, cut off a serif, or stretched the letters. Tools will find the base font, not the modification.
• Discontinued or obscure fonts. Old print materials may use typefaces never digitized.

In these cases, find a close alternative instead. Match the category, x-height, width, contrast, and the two or three most distinctive letters. Most identification tools show "similar fonts," and Google Fonts has many free lookalikes for popular commercial faces.

Before You Use the Font You Found

Identifying a font is not the same as having the right to use it. Once you know the name:

1. Check the license. Is it open source, or does it need a commercial web license? See understanding font licensing.
2. Check availability. Is a web version (WOFF2) offered? Some desktop-only licenses don't include web embedding.
3. Check character coverage for your languages.
4. Test it in context at your actual body and heading sizes before committing.

If it's a free Google Font, you can load it into a Next.js project in seconds:

// app/layout.tsx
import { Manrope } from "next/font/google";

const manrope = Manrope({ subsets: ["latin"], display: "swap" });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={manrope.className}>
      <body>{children}</body>
    </html>
  );
}

Font Identification FAQ

Conclusion

Identifying a font is fastest when you start at the source. If the text lives on a website, DevTools, the Network panel, or a browser extension will tell you exactly what was rendered. When you only have an image, clean it up first, run it through two recognition tools, and verify the top candidates by typing your exact text into their specimens.

When the tools come up empty, fall back on classification and diagnostic letters to narrow the field, and accept that logos and brand fonts are often custom. In that case, a well-chosen alternative is the real goal. Whatever you find, check the license and test it at real sizes before it goes anywhere near production.

Here are some useful references for going deeper on identifying fonts:

1. Chrome for Developers: View and change CSS — inspecting computed styles in Chrome DevTools.
2. Firefox Source Docs: Edit fonts in Firefox DevTools — using the Fonts tab to see rendered fonts and variable axes.
3. Google Fonts Knowledge: Introducing type — classification and anatomy terms that help with manual identification.
4. Identifont: Identifont — a question-based font identification tool that works without an image.