Someone shares a poster. A design mock lands in your inbox. You're rebuilding a competitor's landing page and you want the same feel. The font is the single biggest stylistic clue in all three cases — and it's usually the one thing nobody tells you. Here's how to identify a font from an image, free, without uploading anything.
What you need before you start
The font finder works from pixels, not metadata. A screenshot, a photo of a sign, a flattened PDF export — any image where the lettering is visible — is enough. There is no minimum size, but there is a practical rule of thumb: the more letters you can crop, the more confident the match. Five characters is good; a full word is better; a short phrase is best. Single letters and three-letter words work, but they return a wider list of candidates.
The four-step workflow
1. Upload or paste
Drag the image into the tool, or paste it straight from your clipboard with Ctrl/Cmd + V. PNG, JPG and WebP all work, and files up to a generous 12 MB are accepted. The image is decoded locally with the browser's canvas APIs — nothing is uploaded to a server, so screenshots of unreleased work stay private.
2. Crop the text
Drag a rectangle around one line of lettering. A single line beats a paragraph: it isolates the typeface you're interested in and keeps the baseline estimation clean. If the image has icons or symbols, crop them out — the engine is looking for letterforms, and stray marks add noise.
3. Review the letters
The engine segments the crop into individual glyphs and estimates the baseline and x-height. In the review step you can correct any character it misread — this step is where most first-pass errors get fixed. For connected handwriting, the tool skips letter-by-letter review and matches the whole word instead.
4. Read the results
Each result shows the family name, category, weight, a confidence percentage and a live preview in the typeface. The top candidate is usually the answer; the list below it shows the close runners-up, which matter when the crop was small or the lettering stylised. Copy the CSS snippet and drop it into your stylesheet.
How the matching actually works
Under the hood there are two passes. First, each isolated letter is normalised into a 16×16 binary grid — a compact silhouette that ignores size and resolution. That grid is compared to the same grids pre-computed for 62 characters across all 1,935 free fonts, in regular and bold weights, using a Hamming distance over the 256 cells. This ranks the whole library in milliseconds.
Second, the top candidates are verified by re-rendering the word you cropped in each font and comparing the whole render against your sample. This second pass catches subtle differences in spacing, terminals and joins that a per-letter comparison can miss, and it's what makes the re-ranked top result trustworthy.
Tips that make results land first time
- Prefer front-facing, flat samples. Perspective shots stretch letters unpredictably. A scan or a straight-on photo wins every time.
- Mix cases. A sample with ascenders (b, d, h) and descenders (g, p, y) tells the engine far more than all-caps text.
- Avoid heavy effects. Outlines, drop shadows and embossing blur the stroke edges the matcher reads. A plain dark-on-light render is ideal.
- Check the runner-ups. When the top match is a commercial face, the results panel lists free alternatives — use those unless you hold the licence.
From match to working CSS
Every result card includes an @import URL and a font-family rule. Add the import to the top
of your stylesheet and the rule to the element you're styling:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
Weights load on demand and display=swap keeps text visible while the face downloads. For desktop tools,
each font's page links to the official Google Fonts specimen where you can download the static files for
Photoshop or Illustrator.
What to do when the font is paid
Many famous faces — Helvetica, Gotham, Proxima Nova, Avenir — are commercial. The finder's results surface the closest free, open-source alternative for a wide set of paid type, so you can ship the design direction legally. Read free alternatives to 10 famous commercial fonts for the shortlist, or browse the full free library when you'd rather start from the design direction than the pixels.