Top Free Font Picker Extensions for Chrome and FigmaGood typography speeds reading, strengthens brand voice, and makes interfaces feel polished. Designers and developers often need quick ways to identify, compare, and test fonts without leaving their browser or design tool. This article surveys the best free font picker extensions for Chrome and Figma, explains what to look for, offers workflow tips, and suggests how to choose the right tool for different tasks.
Why use a font picker?
A font picker helps you:
- Identify fonts used on web pages or in designs quickly.
- Preview and compare fonts in-context without switching apps.
- Extract font properties (size, weight, line height, letter spacing) for accurate replication.
- Export or copy font CSS to speed development.
For teams, a reliable font picker reduces guessing, speeds handoffs, and helps maintain typographic consistency.
What to look for in a font picker
Key features to prioritize:
- Font identification accuracy — can it detect system fonts, webfonts, and custom fonts?
- CSS export / copy — copies font-family, font-weight, font-size, line-height, letter-spacing.
- Integration — works inside Figma or within the Chrome browser; can inspect iframes.
- Preview & compare — lets you swap fonts live or compare multiple fonts side-by-side.
- Accessibility details — contrast checks, readable sizing suggestions, variable font support.
- Lightweight & privacy-respecting — minimal permissions and no telemetry if privacy matters.
Best free Chrome font picker extensions
1) WhatFont (free)
WhatFont is one of the simplest, most popular Chrome extensions for quickly identifying fonts on web pages. Click the extension and hover over text to see the font name; click to lock and view details like weight, size, color, and CSS rules.
Pros:
- Fast and unobtrusive.
- Shows Google Fonts links where applicable.
- Easy to use for quick checks.
Limitations:
- Limited advanced features (no side-by-side comparison or accessibility checks).
- Occasionally misidentifies heavily customized or obfuscated fonts.
2) Font Ninja (free tier)
Font Ninja offers font identification plus a simple interface to try fonts and view sizing/spacing. It also provides a downloadable preview for some found fonts.
Pros:
- Clean UI, includes font preview and quick download links.
- Good for designers who want to test fonts quickly.
Limitations:
- Some advanced features behind a paid plan.
- Downloads may not always include licensing information — verify before using commercially.
3) Fontface Ninja (free)
Fontface Ninja detects web fonts and can hide images to make text easier to inspect. It shows font properties and often provides links to buy or download fonts.
Pros:
- Simple, design-friendly interface.
- Useful for finding commercial fonts.
Limitations:
- Can prompt users about paid fonts; not all fonts are freely usable.
4) Fount (free)
Fount works with a bookmarklet-style approach and provides font name, size, weight, and line-height. It’s lightweight and doesn’t require a heavy extension install.
Pros:
- Minimal permissions, easy to run.
- Great for users who prefer bookmarklets.
Limitations:
- Less feature-rich than full Chrome extensions.
Best free Figma font picker plugins
1) Font Scanner (free)
Font Scanner scans Figma documents to list all fonts used across frames and pages. It helps identify missing fonts and provides a quick inventory for design system audits.
Pros:
- Ideal for teams auditing font usage.
- Exports lists for handoff.
Limitations:
- No live in-place replacement; focused on reporting.
2) Font Preview (free)
Font Preview lets you quickly swap fonts on selected text layers with installed or Google Fonts to see live previews. Great for A/B testing within Figma.
Pros:
- Fast live swapping, supports Google Fonts.
- Keeps layer styles intact when swapping.
Limitations:
- Requires selecting layers; not for whole-document scans unless you select many layers.
3) Find and Replace Fonts (free)
This plugin finds instances of a font and replaces them with another across the file. It’s essential when consolidating fonts for a design system.
Pros:
- Bulk replace across pages and frames.
- Shows counts of replaced items.
Limitations:
- No font identification on web pages — Figma-only.
4) TypeScale / Font Typer (free)
Type-scale and some font-utility plugins provide quick previews of font scales, pairings, and sizes inside Figma. They’re useful when establishing or testing typographic scales.
Pros:
- Helps create consistent typography systems.
- Visual preview of scales and pairings.
Limitations:
- Not focused on identifying fonts from external sources.
How to choose between Chrome extensions and Figma plugins
- If you need to identify fonts used on websites while browsing, use a Chrome extension (WhatFont, Fontface Ninja).
- If you’re working inside Figma on a product UI or design system, use Figma plugins (Font Scanner, Font Preview, Find and Replace Fonts).
- For handoff to developers, prefer tools that export CSS or provide exact font metrics.
- If privacy or permissions are a concern, choose bookmarklet-like tools (Fount) or check extension permissions before installing.
Quick workflow examples
- Finding a font on a marketing site to use in a Figma mockup:
- Use WhatFont to identify the font and capture CSS.
- In Figma, use Font Preview to swap the selected text to that font and test sizes.
- Consolidating multiple fonts in a large Figma file:
- Run Font Scanner to list all fonts.
- Use Find and Replace Fonts to replace multiple families with chosen system or Google Fonts.
- Use TypeScale to reapply consistent sizes.
- Developer handoff:
- Identify fonts with an extension that copies CSS (WhatFont/Font Ninja).
- Paste CSS into your dev handoff doc or style guide; include fallback stacks and licensing notes.
Accessibility and licensing reminders
- Always verify font licensing before using or distributing a font — identification tools can’t confirm license rights.
- Check contrast and readable sizes—font pickers help identify type but don’t replace accessibility testing.
Conclusion
For quick font identification on the web, WhatFont and Fontface Ninja are solid free choices; for Figma workflows, Font Scanner and Font Preview cover most designers’ needs. Combine a browser font picker with Figma plugins to move smoothly from discovery to design and handoff.
Leave a Reply