Design Snap
A WhatFont alternative that captures the whole type system
WhatFont is the classic way to name the font under your cursor. Design Snap does that too with its inspector, then goes further: it extracts every custom font family on the page with the type scale, weights and line-heights, alongside the colors, radii and CSS variables — and exports it all to Tailwind, CSS or Figma.
Rated 5.0/5 on the Chrome Web Store · read the reviews · Free plan · No account · 100% local analysis
How to get a site's full typography, not just one font
Hovering elements one by one tells you their font. Extracting the page tells you the system: which families, which sizes, which weights.
-
Install
Add Design Snap to Chrome from the Chrome Web Store. Free plan, no account.
-
Extract
Open the website and press Extract. The Typography tab lists each custom family and the sizes and weights in use.
-
Export
Export the type scale to
tailwind.config.js, CSS variables, JSON or Figma tokens.
Design Snap vs WhatFont
Written by the developer of Design Snap — bias stated upfront. Capabilities reflect both tools at the time of writing (October 2026); where WhatFont is the better tool, the table says so.
| Capability | Design Snap | WhatFont |
|---|---|---|
| Identify the font of a hovered element | Yes — element inspector | Yes — its core feature, very fast |
| Ultra-lightweight, one-purpose tool | No — a full design-system extractor | Yes |
| Every custom font family on the page at once | Yes — fallbacks filtered out | No — one element at a time |
| Font sizes deduplicated into a type scale | Yes | No |
| Weights and line-heights in use | Yes | Per element only |
| Colors, radii, shadows, CSS variables | Yes | No |
| Export typography to Tailwind, CSS, JSON, Figma | Yes — free | No |
| Composite typography tokens (Style Dictionary) | Yes — PRO | No |
| Price | Free · PRO €4.99 once | Free |
When WhatFont is enough
If all you want is the name of one font, right now, WhatFont is lightweight and does exactly that. There's no reason to switch for a single lookup.
When you need more than a name
Knowing a heading is set in “Inter 600” rarely ends the task. You want to rebuild the typography: the body size, the scale up to the hero, the weights used for labels and buttons, the line-heights. With a hover tool, that means sampling a dozen elements and writing everything down. Design Snap extracts it in one pass and hands you a type scale like 12 · 14 · 16 · 20 · 24 · 32 with weights 400 · 600 · 700.
Then it writes the code: a fontFamily and fontSize block for Tailwind, --font-sans CSS variables, Figma tokens, or composite typography tokens in Style Dictionary v3 (PRO). And because typography never lives alone, the colors, radii, shadows and CSS variables of the page come with it.
From a font name to a working type scale
Design Snap keeps the hover-to-identify convenience and adds the system view designers and developers actually need.
- Element inspector for any single font
- All custom families on the page, fallbacks filtered
- Sizes deduplicated into a scale, with weights and line-heights
- Export to Tailwind, CSS variables, JSON or Figma
- Colors, radii and shadows included in the same extraction
WhatFont alternative — FAQ
Design Snap is a free Chrome extension that identifies the font of any element like WhatFont, and also extracts the whole typography system of the page — every family, the size scale, weights and line-heights — with an export to Tailwind, CSS or Figma.
Yes. Hover any element with the inspector in the side panel to see its computed styles, including its font.
Yes. Design Snap reads the computed font-family the browser applies, whatever service serves the font.
Yes. Font identification, the inspector and the Tailwind, CSS, JSON and Figma exports are free. PRO is a single €4.99 payment.