Back to Blog

WhatFont vs Font Detector: Which Gives You More Information

PB

Patrick Bushe

August 8, 2024 · 5 min read

WhatFont and Font Detector both tell you what font a web page uses when you click its text. They overlap a lot, so the choice comes down to details. Disclosure: Font Detector is made by Bushe.co.

WhatFont

  • One of the oldest and best-known font identifier extensions.
  • Hover over text to see the font name, and click for a panel with details such as size, line height, weight and color.
  • Can point out web fonts served by services like Google Fonts.
  • Check its Web Store page for recent updates before installing, since older extensions sometimes stop being maintained.

Font Detector

  • Font Detector shows the font family, size, weight, style, line height and color (with its hex code) of any text you click.
  • Works on any site, entirely in your browser, with no account.
  • Shows the first font in the page's font list, which is the font the designer chose.

Where both fall short

  • Fallback fonts. A site's CSS lists several fonts in order. Extensions usually report the one the designer asked for, but if it fails to load, your browser uses the next one. To see the font actually drawn, use DevTools: right-click → Inspect → Computed tab → Rendered Fonts. See system fonts vs web fonts.
  • Text in images. Neither can read fonts inside images, logos or videos.
  • Licensing. Knowing a font's name doesn't mean you can use it. Many are paid, or licensed only to that company.

For fonts in images

  • WhatTheFont by MyFonts identifies fonts from an uploaded image.
  • Font Squirrel's Matcherator does the same and favors free fonts.
  • Identifont works differently: you answer questions about the letter shapes, which helps when the image is poor.

Which to use

  • If you mostly want the font name, either works.
  • If you also want the color code and line height to recreate a style, Font Detector shows them in one panel.
  • For detailed checks, DevTools shows everything, including the rendered font and every CSS rule.

Permissions to expect

A font identifier needs to read the page you click on, so it asks for access to sites. That's normal for this kind of tool. What matters is that it doesn't send page content anywhere. Check the privacy policy, and prefer tools that only act when you click them.

For finding free alternatives to fonts you like, see Google Fonts pairings.

More Tools by Patrick Bushe

Free Chrome extensions to boost your productivity and privacy