ScreenshotNeo

BlogGuides

Detecting Fonts in Design Tools Automatically

Learn how Illustrator and Photoshop suggest fonts from images, what Figma’s font tools actually do, and how to improve your chances of finding a close match.

By the ScreenshotNeo team29 September 202610 min read

Detecting Fonts in Design Tools Automatically

To identify a font in an image, use Retype in Adobe Illustrator or Match Font in Adobe Photoshop. Both analyze selected image text and suggest visually similar typefaces. They provide candidates, not proof of an exact match. Figma’s font installer does a different job: it makes fonts installed on your computer available in Figma; it does not identify a typeface from pixels.

The right workflow depends on what you have: a raster image, outlined vector text, or a font file already installed on your computer. This guide covers each case, how to improve suggestions, what to do when detection fails, and how to keep fonts available across design tools and collaborators.

1. Choose the tool for the input

Your input Use What you get
Raster image, such as a screenshot or flattened poster Illustrator Retype or Photoshop Match Font Suggestions for visually similar fonts
Outlined text in an Illustrator document Illustrator Retype Detected text regions and candidate fonts
A font installed on your computer that is missing in Figma Figma font installer Access to that installed font inside Figma
A font name or file found elsewhere Install it through your operating system or font manager, then reopen the design app The installed typeface becomes available to apps that can use local fonts

Before matching, crop or select the text you care about. A clean, legible sample makes it easier to judge candidates. If the image contains several typefaces, inspect one region at a time. Do not assume a tool has identified the original font just because its first suggestion looks close.

2. Identify a font in Illustrator with Retype

Illustrator Retype can identify text in raster images and outlined text. It detects text regions automatically, then displays font suggestions ordered by visual closeness. If the automatic detection misses the text, you can mark the region yourself.

Font matching tools turn a selected image region into a ranked list of visual candidates.
Font matching tools turn a selected image region into a ranked list of visual candidates.
  1. Open the Illustrator document and select the image or outlined text.
  2. Open Retype. Depending on your workspace, use Window > Retype, the Type menu, the right-click menu, or Quick Actions in the Properties panel.
  3. Choose Find Matching Fonts.
  4. Review the detected text outlines. Select the region whose typeface you want to match.
  5. Compare the suggestions, starting with the closest. Retype shows 10 matches by default; request five more if you need a wider set.
  6. Adjust the script and font-source filters if relevant. The panel offers Roman or Japanese script selection and options to include or exclude Adobe Fonts and fonts from your device.
  7. If Retype did not detect the text, draw a marquee around it and inspect the resulting suggestions.
  8. If an Adobe Fonts suggestion fits, add it to Illustrator from the Retype panel.

Adobe says marquee selection works best for horizontally aligned text set in a single font. For a wordmark with multiple lines, angled type, or mixed faces, select smaller regions rather than asking one selection to describe everything. Retype’s suggestions are ranked by closeness, so treat the list as a shortlist to evaluate.

See Adobe’s Illustrator Retype documentation for the current interface and controls.

3. Identify a font in Photoshop with Match Font

Photoshop Match Font starts from a region you select in an image. You choose the text with the Rectangular Marquee tool, then ask Photoshop to find similar fonts.

  1. Open the image in Photoshop and choose the Rectangular Marquee tool.
  2. Drag a selection around the text sample. Keep the selection focused on one typeface and include enough characters to show distinctive shapes.
  3. Choose Type > Match Font.
  4. Review the similar-font suggestions in the dialog.
  5. If you only want to see fonts available locally, configure the dialog to hide Adobe Fonts suggestions.
  6. Choose the closest candidate, then compare it in your actual design before committing.

Photoshop’s result is a set of similar fonts, not a guaranteed recovery of the font embedded in or used to create the image. Look closely at distinctive forms such as lowercase “a” and “g,” numerals, punctuation, width, and overall proportions. Adobe’s Photoshop Match Font guide describes the selection and filtering workflow.

4. What Figma’s font tools do—and do not do

Figma’s font installer, also called FigmaAgent, detects fonts installed on your computer and makes them available inside Figma. It is a font-availability feature, not image-based font recognition. If your goal is to identify a typeface in a screenshot, use an image-matching workflow such as Illustrator Retype or Photoshop Match Font; then install or access the candidate font as needed.

Figma’s font installer exposes fonts already installed on the computer; collaborators need matching font versions.
Figma’s font installer exposes fonts already installed on the computer; collaborators need matching font versions.
  • Figma desktop app: the font installer is included.
  • Figma in a browser: install the font installer to use additional fonts installed on your computer.
  • ChromeOS and Linux: Figma’s cited help page says additional fonts are not supported there; users are limited to Google fonts and the Apple fonts available in the documented environment.
  • Adobe Fonts: add the fonts to your computer through Adobe Fonts first. Browser users also need the Figma font installer.

For shared files, collaborators need the same font and font version installed on their own computers. After installing a font, Figma recommends restarting Adobe and Figma apps or reloading the browser. See Figma’s guides to adding fonts and using Adobe Fonts.

5. Get better font-match suggestions

Font matching is a visual search problem. The quality of the sample and the way you split it into regions affect how useful the shortlist is.

  • Use a clear sample. Prefer sharp, high-resolution text with strong contrast against its background. If you can, use the original asset rather than a compressed preview.
  • Select one face at a time. A single selection containing a headline, caption, and logo can combine unrelated letterforms. Crop or marquee each type style separately.
  • Keep text horizontal when possible. This is especially relevant to Illustrator’s manual marquee selection, which Adobe says works best for horizontally aligned, single-font text.
  • Include distinctive characters. A sample with varied letters and numerals can make it easier to compare candidates than one containing only repeated basic shapes.
  • Compare more than the name. Check letter shape, width, weight, spacing, and punctuation. A similar family or weight may be a better visual fit than a candidate with a familiar name.
  • Use source filters deliberately. In Illustrator, filter Adobe Fonts or device fonts according to where you can get the candidate. In Photoshop, hide Adobe Fonts suggestions when you only want locally available options.
  • Verify in context. Test the closest candidates with the actual word, size, and layout. A typeface can look close in a small sample and differ noticeably in a headline.

Do not treat a match as metadata recovered from the image. Raster pixels do not necessarily preserve the font’s name, and outlined text no longer contains editable font information. The tools analyze appearance and suggest candidates.

6. When text is outlined, missing, or hard to read

Outlined vector text

Outlining converts editable characters into vector shapes. Illustrator Retype can analyze outlined text and suggest matches, but the original editable font association may no longer be present. Keep a copy of the original editable file when possible.

Low-resolution or compressed images

Compression, blur, tiny type, and low contrast can obscure the shapes that distinguish one font from another. Try a higher-resolution source or a larger crop. If no better source exists, compare the suggestions manually and expect uncertainty.

Mixed type, perspective, or rotated text

Break a design into smaller selections that each contain one typeface. Straighten or crop a sample only if doing so does not distort the letterforms. For manual selection in Illustrator, the documented guidance favors horizontal, single-font text.

Unusual scripts

Illustrator Retype provides Roman and Japanese script choices. Choose the script that matches the sample. The available evidence here does not establish support for every writing system or language, so check the tool’s current interface for your specific text.

7. Make the candidate usable across apps and teams

  1. Decide where the candidate font should come from: an Adobe Fonts match, a font already on your device, or a font file you can legitimately install.
  2. Install or activate the font on the computer that will render the design.
  3. Restart the design app or reload the browser if the font does not appear. Figma specifically recommends restarting Adobe and Figma apps or reloading after installation.
  4. For Figma browser use, confirm the font installer is installed and running.
  5. Tell collaborators which font and version the file uses, and make sure they have the same version installed.
  6. Reopen the document and inspect it for substitutions, changed line breaks, or altered text widths.

Font availability is local to the environment in the workflows described by Figma. A shared design does not by itself guarantee every collaborator has the same font installed. Version differences can change wrapping and spacing even when the family name is the same.

8. Troubleshooting

Symptom Likely cause What to try
Retype finds no text The sample is unclear, small, angled, or outside the detector’s easiest cases Select the image or outlines, then draw a marquee around one horizontal, single-font region.
Retype shows the wrong region The image contains several text blocks or typefaces Select the intended detected region, or manually marquee a smaller sample.
The first suggestion is not a convincing match Suggestions are ranked by visual closeness, not guaranteed exact identification Compare additional suggestions, request more Retype results, and inspect distinctive glyphs in context.
Photoshop Match Font offers fonts you cannot use locally Adobe Fonts suggestions are included Hide Adobe Fonts in the Match Font dialog to focus on locally available fonts.
A font is missing in Figma in a browser The font installer may not be installed or available to the browser workflow Install or start Figma’s font installer, then reload the browser.
A font remains missing after installation The design app or browser may not have refreshed its available fonts Restart Adobe and Figma apps or reload the browser; confirm the font is installed on that computer.
A teammate sees substituted text The teammate lacks the same font or version Have collaborators install the same font and version, then reopen the file and check layout.
Additional fonts are unavailable on ChromeOS or Linux in Figma Figma’s cited documentation says additional fonts are unsupported on those systems Use fonts available in the documented environment or perform the work on a supported setup.

9. Screenshot a font specimen page without setting up a browser

When you have narrowed down candidates, you may want a consistent screenshot of a specimen page or design reference to compare or share. You can capture it yourself in a browser, or use ScreenshotNeo, a website screenshot API and MCP server for developers. It does not identify fonts; it captures web pages.

DIY browser capture

  1. Open the specimen or reference page in a browser.
  2. Set the viewport and zoom consistently for each candidate.
  3. Capture the visible region or full page with your browser’s screenshot feature.
  4. Use the same page width and scale for each comparison, then label the resulting files outside the capture.

Or skip the browser setup

One GET request returns an image or PDF. This cURL example saves a WebP screenshot:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Replace the sample target with the specimen page you want to capture. See the ScreenshotNeo API documentation for request options and response details.

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits cost nothing, and response headers report the page verdict and billing status. An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for free and capture 1,000 screenshots a month with no card.

10. Practical notes on speed, reliability, and cost

For font identification, the core work happens in Illustrator or Photoshop: selecting a suitable sample and reviewing candidates. Spend effort improving the sample before widening the search. A focused, legible crop is easier to evaluate than a full poster with several typefaces.

For shared design files, reliability means checking the font on the actual machines that will edit or render the file. Record the family and version, refresh the app after installation, and inspect line breaks after collaborators open it. Font suggestions can reduce manual searching, but visual review remains part of the job.

ScreenshotNeo’s pricing is separate from font matching. Its Free plan includes 1,000 screenshots per month without a card. Paid plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Only clean shots are billed; the response includes the page verdict and billing headers. Use these limits when estimating a capture workflow, rather than treating a screenshot request as a font-recognition operation.

11. FAQ

Can a design app tell me the exact font from any image?

No. Illustrator Retype and Photoshop Match Font present visual suggestions. Confirm the closest candidate by comparing the letterforms and testing it in the design.

Can Figma identify a typeface from a screenshot?

The Figma font documentation covered here describes making installed fonts available in the app. It does not document image-based font matching.

Can Illustrator Retype work on text that has been converted to outlines?

Yes. Adobe documents Retype for raster images and outlined text. It suggests matches from the shapes; outlining does not make the original font name certain.

Why does the same Figma file look different for a teammate?

Figma says collaborators need the same font and version installed. Differences in availability or version can cause substitutions or layout changes.

Does ScreenshotNeo find fonts on a page?

No. ScreenshotNeo captures webpages as images or PDFs through an API or MCP server. Font matching is done in the design tools described above.

Sources