A WhatFont alternative that lists every font on a page
WhatFont is the classic answer to “what font is this?”: turn it on, hover a heading, and the font name appears. When you want all the fonts a site uses, what each is for, and the sizes and weights that go with them, hovering element by element gets slow. Stylasso reads the whole page in one click.
Side by side
WhatFont details are from its Chrome Web Store listing as of 11 November 2026 (version 3.3.0, updated 12 October 2026, about 3,000,000 users, rated 3.8).
| WhatFont | Stylasso | |
|---|---|---|
| Font of one element | Yes: hover any text, click for details | No hover mode |
| Every font on the page at once | Not listed | Yes, each with its role: heading, body, mono |
| Details per font | Real font name, where it comes from, letter spacing, line height, text color, HTML element | Weights in use, source (Google Fonts, self-hosted…), the full type scale with size, weight, line height and letter spacing |
| Paid font | Not listed | Suggests the closest free Google font |
| Colors, spacing, radii, shadows | Text color only | Yes, the whole palette with roles and contrast |
| Copy or export | Click a value to copy it, or copy all the CSS for that element | CSS variables, Tailwind v4, DESIGN.md, JSON free; shadcn/ui theme and Figma tokens in Pro |
| Price | No price or paid plan shown on the listing | Free; Pro is $9.99 once |
“Not listed” means we could not find it on the listing, not that we tested every corner of WhatFont.
What a whole-page read looks like
Stylasso ran on Northwind Roasters, a fictional coffee shop we built for demos. One click found three fonts:
- Northwind RoastersFraunces, heading, weight 600from Google Fonts
- Northwind RoastersHanken Grotesk, body, weights 400, 500, 600from Google Fonts
- Northwind RoastersJetBrains Mono, mono, weight 400from Google Fonts
And the type scale that goes with them, as measured on the page (base 17px, ratio about 1.56):
| Step | Size | Font and weight | Line height | Letter spacing |
|---|---|---|---|---|
| h1 | 64px | Fraunces 600 | 1.04 | -1.28px |
| h2 | 40px | Fraunces 600 | 1.1 | -0.4px |
| h3 | 22px | Fraunces 600 | 1.25 | 0 |
| Body | 17px | Hanken Grotesk 400 | 1.6 | 0 |
| Small | 14px | Hanken Grotesk 400 | 1.6 | 0 |
Getting the same table with a hover tool means finding an h1, an h2, an h3, a paragraph and a caption, hovering each, and writing the numbers down.
What you paste
The font and type lines of the free CSS variables export for that page, unedited:
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600&family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap");
:root {
/* ...colors */
--font-heading: Fraunces, ui-sans-serif, system-ui, sans-serif;
--font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--text-6xl: 4rem;
--leading-6xl: 1.04;
--weight-6xl: 600;
--text-4xl: 2.5rem;
--leading-4xl: 1.1;
--weight-4xl: 600;
/* ...xl, base, sm, spacing, radii and shadows */
}
The Google Fonts @import line is built for you, with only the weights the page uses. Pick Tailwind instead and the same fonts and sizes come out as a v4 @theme block; see Turn any website into a Tailwind v4 theme.
When to use which
Keep WhatFont (or the Rendered Fonts section in DevTools) when you want the font of one specific line of text, such as a logo or a pull quote. Reach for Stylasso when you want a site’s whole type system: every family with its job, the weights to load, and the sizes, ready for a stylesheet, a Tailwind project or a prompt for Cursor or Claude Code. The free way to do it by hand is in What font is this website using?
Questions
Does Stylasso show the font I hover?
No. It reads the whole page when you click the toolbar icon. For one element, a hover tool or DevTools is quicker.
Does it name fonts inside images or logos drawn as pictures?
No. It reads the fonts the browser renders as text. Text inside an image, or a logo saved as a picture, needs a font-from-image tool.
Is anything sent to a server?
No. The page is read in your browser when you click the icon, only in that tab. Nothing leaves your browser unless you publish a share link.