Arturo logoBeta

Guide · 5 min read

How to Extract Fonts From a Screenshot (Without Guessing)

You have a screenshot, a PDF, or an AI-generated mockup, and you need to match the fonts on your real site. Here's the fastest way to do it — and why the traditional workflow of squinting at letterforms and browsing WhatTheFont dead-ends more often than it should.

The 60-second answer

To extract a font from a screenshot:

  1. Drop the image into Arturo.
  2. Draw a box around the text you want identified.
  3. Get back the closest Google Font, weight, and a @import snippet you paste straight into your CSS.

If you want the manual route or the free tools, the rest of this guide covers them and where each one breaks down.

Why identifying fonts from an image is harder than it looks

A rendered screenshot has none of the metadata that a font file, a Figma layer, or a live web page carries. There's no font-family declaration to inspect, no layer name to check, no fontName property. All you have is pixels that happen to look like letters.

Font recognition has to work backwards from those pixels:

  • Segment individual glyphs from the background.
  • Normalize size, angle, and color.
  • Compare the shape of each glyph against a font database, weight by weight.
  • Return the closest match with a confidence score.

That pipeline works well on clean, high-contrast text. It falls apart on tiny text, text on top of a busy photo, and stylized display type.

The three ways people usually do this

1. WhatTheFont / WhatFontIs

You upload the image, crop to a single line of text, and it returns a list of candidate fonts. It works — for a single headline, on a clean background, from a known foundry. Downsides: you have to crop each font sample yourself, most matches are paid foundry fonts you can't use, and there's no path from "here's the font name" to "here's the CSS I paste into my site."

2. Fontanello / WhatFont browser extensions

Great — if the source is a live web page. They read the actual CSS. But if what you have is a Figma export, an AI-generated mockup, a PDF, or a phone screenshot from a client, there's no CSS to read. This whole category is out.

3. Eyeballing it in Google Fonts

You scroll Google Fonts, filter by serif / sans-serif / display, and squint until something looks close. You'll get within a neighborhood of the right family. You will not get the right weight, and you'll spend twenty minutes doing it.

What "extract" should actually give you

If you're extracting fonts from a screenshot so you can build a real site, "the name of the font" is only half the answer. You also need:

  • The weight and style for each place the font appears — a heading at 700, a subhead at 500, body at 400.
  • A free equivalent if the exact font is paid, so you can ship without a licensing detour.
  • Ready-to-use CSS — the @import line or <link> tag plus the font-family stack. Not a screenshot of a font specimen.
  • Grouped by role — heading, subhead, body, caption — not just a flat list of every font found in the image.

How Arturo extracts fonts from a screenshot

Drop your image in — screenshot, Figma export, PDF page, AI mockup, phone photo of a business card, doesn't matter. Arturo analyzes every text region in the image and returns:

  • The closest Google Font family for each text role (heading, subhead, body).
  • The weight for each occurrence — 700 for the hero headline, 500 for the section titles, 400 for body copy.
  • A ready-to-paste @import snippet that loads only the weights you actually use.
  • A font-family stack with a sensible system fallback.

All of that in one pass, in about the time it takes to open Google Fonts.

What to do when the font in the screenshot is a paid foundry font

This comes up more than you'd think, especially with client-sent mockups. The workflow is the same either way — Arturo returns the closest Google Font. For AI-generated mockups this is almost always the right choice: the AI wasn't paying a foundry either. It generated pixels that look like a font in that family. Matching to the closest free equivalent gets you the same visual result without the licensing conversation.

For real brand work where the exact font matters, use the match as the shortlist. Confirming "this looks like Inter or IBM Plex Sans" gets you 90% of the way to the right paid font faster than scrolling MyFonts.

Common questions

Can it identify fonts from very small text?

Text below about 20 pixels tall is hard for any font-recognition system. If you can, work from a higher-resolution version of the screenshot — a raw PDF, the original PNG export, or a Retina screenshot rather than a compressed re-share.

What about handwriting or custom logo lettering?

Body and heading fonts match reliably. Stylized display fonts and hand-drawn logo lettering are the hardest category — you'll get the closest family, not always an exact hit. For a logo, consider tracing it as an SVG rather than trying to identify a font.

Does it work on non-Latin scripts?

Latin scripts (English, Spanish, French, German, etc.) match best. Cyrillic and Greek work but the Google Fonts pool is smaller. CJK scripts are supported for a subset of common families.

Try it on a screenshot right now

First 25 assets are free — no signup required. Drop in the screenshot and get the fonts, palette, and clean images out in about three minutes.

Try free — no signup See pricing

Related reading