WhatFont Alternatives: 5 Font Identifiers Compared

Published October 2, 2026 · 10 min read · by the CSS DNA team

Quick answer: The closest free WhatFont alternative is Fonts Ninja, which does the same hover-to-identify job and was updated in September 2026. Fontanello is the lightest option: right-click any text to see its family, weight, size and contrast. Chrome DevTools’ Rendered Fonts panel is built in and shows the font the browser actually drew. To list every font on a page at once, paste the URL into a font finder or use a whole-page extension.

WhatFont hasn’t been updated since March 2024

WhatFont roundups rarely mention when it last shipped. Its Chrome Web Store listing shows version 3.2.0, last updated March 4, 2024. It still lists 3,000,000 users and it still works on most pages, so this isn’t an obituary. Two and a half years without a release does mean nobody is fixing it when a site or a Chrome change breaks it, and that is usually why people end up searching for an alternative.

For comparison, the Fonts Ninja listing shows version 9.0.2, updated September 26, 2026, and Fontanello shows 1.3.0, updated April 22, 2024. A slow release cadence is normal for a small, finished tool. It only matters when something stops working.

Why WhatFont stops working on some pages

When people search “WhatFont not working,” the cause is rarely WhatFont itself. Any font extension hits the same walls:

• Chrome doesn’t let extensions run on chrome:// pages, the Chrome Web Store, or other extensions’ pages. Clicking the icon there does nothing.
• The text is an image, an SVG path, or drawn into a <canvas>. There is no CSS font to read; you need an image-based identifier instead.
• The text sits inside a cross-origin iframe, such as an embedded widget or ad. The extension reads the outer page and misses it.
• Site access is set to “On click” or restricted in chrome://extensions, so the extension never gets permission on that site.
• The tab was open before you installed the extension. Reload it.
• PDFs open in Chrome’s built-in viewer, which isn’t a normal web page.

If none of those apply and it still fails, that is the point where a maintained tool or DevTools is the better bet.

The comparison

The five alternatives

Chrome DevTools: Rendered Fonts

The tool you already have, and the only one that tells you which font file the browser actually used. Inspect the text, open the Computed tab, and scroll to the bottom. Under Rendered Fonts you’ll see something like Inter — Network resource (12 glyphs) or Helvetica Neue — Local file. That distinction answers the question hover extensions often blur: the font-family declaration lists what the designer asked for, and Rendered Fonts lists what you got.

It is slow for browsing, a few clicks per element, and it shows one element at a time. For a full walkthrough, including Firefox and Safari, see five ways to find what fonts a website uses.

Fonts Ninja

The most direct WhatFont replacement. Roll over text and you get the family plus its CSS properties; the listing also mentions foundry details, similar-font suggestions and bookmarks. The extension is free on the Chrome Web Store, with Firefox and Safari versions. The business model is a font marketplace: the site lists fonts with prices (several start around $25 to $35 when we looked), so the extension’s font pages point you toward buying. If you’re identifying a font in order to license it, that’s convenient. If you only want the name, it’s a little more storefront than WhatFont.

On “WhatFont vs Fonts Ninja,” the short version is that both identify a font on hover, Fonts Ninja is actively maintained, and WhatFont is plainer and has no commercial angle.

Fontanello

A small open-source extension by Lars Wästfelt and Fred Bergman (MIT license on GitHub). You right-click text and pick Fontanello from the context menu; it shows typeface, weight, size, color, line height and the text’s contrast ratio. It runs on Chrome, Firefox and Edge, plus an iOS Safari version, which makes it one of the few that work on an iPhone. Right-click is also a good fit for pages where a hover overlay gets in the way of menus. Last updated April 2024, like WhatFont, so the same caveat applies.

CSS DNA

CSS DNA, a browser extension for inspecting CSS, works at two scales. Hover any element and the free tier shows its family, weight, size and line height along with the rest of its CSS. Open the panel and it reads the page’s whole type system: every family actually rendered, the weights in use and the type scale. That second view is the thing hover tools can’t give you, because a hover tool only knows about the element under your cursor.

Exporting that type scale as Tailwind, CSS custom properties, JSON tokens or Figma is a Pro feature ($5/mo after a 7-day trial). It runs on Chrome, Edge, Brave and Arc, with a Firefox build, and nothing leaves your machine.

Font Finder, a free URL scanner

If you don’t want to install anything, Font Finder takes a URL, fetches the page’s HTML and CSS on our server, and reports each family, where it comes from (Google Fonts, Adobe Fonts, self-hosted files or system fonts), the weights declared, and which roles use it, such as headings or body text. Because it reads the source rather than a rendered page, it misses fonts that JavaScript injects at runtime, and it reports what the CSS declares, which can include weights the page never actually uses. For a quick “what is this site using” it’s the fastest route, and it works from a phone.

Which family does your browser actually use?

Every tool above reads the CSS, and the CSS is a list of wishes. font-family: "Söhne", "Helvetica Neue", Arial, sans-serif renders as Söhne only if the web font loaded; otherwise you get the next one your machine has. The tester below shows that resolution for any stack you type, on your device.

Why not just call document.fonts.check()? Because it answers a different question. Per MDN, it returns true when rendering wouldn’t wait on an unloaded web font, so document.fonts.check("12px i-dont-exist") is true too. The tester uses it only to load declared web fonts before measuring.

Two caveats when reading the result. Fallback happens per character, so a family that exists but lacks a glyph (an emoji, a rare accent) hands that glyph to the next family. And Safari only exposes fonts that ship with the operating system plus web fonts; WebKit’s tracking prevention hides fonts you installed yourself. A font that shows as available in Chrome can show as missing in Safari on the same Mac, and that’s accurate: Safari won’t use it.

Checking it by hand

For one element, DevTools’ Rendered Fonts is the ground truth. For the whole page, paste this into the console to list every web font that has loaded:

[...document.fonts]
  .filter(f => f.status === "loaded")
  .map(f => `${f.family} ${f.weight} ${f.style}`)

That covers web fonts only. System fonts never appear in document.fonts, and families declared but never used stay "unloaded", which is a useful hint that the CSS ships more than the page needs. To map families to roles, you’re back to inspecting a heading, a paragraph, a button and a form field one at a time and writing the answers down.

Which one fits you

If you identify a font a few times a week and liked WhatFont’s hover, install Fonts Ninja; it’s the same gesture and it’s maintained. If hover overlays annoy you, or you want contrast alongside the name, Fontanello’s right-click is calmer. On a work machine where you can’t install extensions, DevTools and Font Finder cover everything without permission requests.

If you’re rebuilding or auditing a site rather than naming one font, you want the whole type system: families, weights and the size scale together. That’s the job CSS DNA was built for, and it’s described step by step in how to rebuild any website’s design. And if the next step is getting the font file itself, read how to download fonts from a website first, because the licensing part catches people out.