Screenshots are where most modern font-hunting happens. A colleague posts a dashboard, a Figma mock arrives as a PNG, a landing page catches your eye — and the typeface you want to copy is trapped inside the pixels. Identifying it is usually a two-minute job, but screenshots have a few habits that trip people up. Here's how to get it right.
Why screenshots are different from photos
Screenshots are already flat and front-facing, which makes them excellent input for shape matching — no perspective correction needed. Their weakness is the opposite problem: they're often small. An 11px paragraph at 100% zoom has anti-aliased edges that blur the strokes a matcher reads. The fix is scale, not resolution. Zoom the page until the target line is large on screen, then capture — or simply crop tightly and let the engine normalise the size.
Isolate the typeface you want
Interfaces almost never use one font. A heading is often a different face from the body copy, which differs again from button labels and input text. Identify each one separately: crop a single line of the headline, run it, then go back and crop a line of body copy. Mixing two fonts in one crop averages their shapes and produces a confusing ranking.
Dark mode and colour don't matter
The matcher works from ink shapes, not colour. Dark-theme screenshots with light text are handled automatically — the binarisation step figures out which side is the ink and thresholds accordingly. Backgrounds with gradients or photography are the real obstacle; crop as tight as you can around the text so the estimation of the background colour stays correct.
Common screenshot cases, solved
Website headline
Crop the heading only. Most web headings are set in Google Fonts — Inter, Roboto, Montserrat, Playfair Display — so a match usually lands directly in the free library with the exact CSS you need to replicate it.
App UI
System faces like SF Pro and Segoe UI aren't in the open-source library, but the finder will surface the closest free equivalent (typically Inter) rather than giving up. If you're shipping a web version of the UI, that's the font you'd use anyway.
Social media graphics
Quote cards and infographics often use display or handwritten fonts. Crop the quoted line and — if it's connected script — let the whole-word matcher do its thing. These graphics are usually rendered at high resolution, so matches tend to be confident.
PDF and document exports
Flattened PDFs are effectively screenshots. One extra step: make sure the text layer isn't selected — you want the pixels, not embedded glyph data. A plain export is the cleanest input.
What to do when the match is a commercial face
Screenshots of marketing sites frequently use licensed fonts — a brand headline set in Gotham or a poster in Proxima Nova. When that happens, don't recreate it with a clone you found on a free-font site (the licence risk is real). Instead use the free alternative surfaced in the results, or check the free font alternative finder for a shape-matched, licence-safe twin.
The quick recipe
- Zoom to make the text large, then screenshot.
- Crop one line of a single font.
- Review the detected letters and correct any mistakes.
- Read the ranked matches and copy the CSS.
Ready to try it? The screenshot font finder has the workflow built in — or jump straight to the main font finder.