You're scrolling through a feed of websites and suddenly, there it is. The perfect font you've been searching for weeks. That particular flourish on the lowercase "a" and proportions that make the typographer inside you squeal with delight. But the name? The site author didn't label it, digging through the CSS takes time, and the designer's support is on vacation.

A font on screen is a CSS property, not an image. The browser honestly gives up the name, weight, size and even the foundry to anyone who knows where to look. Over recent years, font identification tools have evolved from a DevTools tab to extensions that show license prices, suggest free alternatives and bookmark finds into a collection.

In this guide, five methods: from instant (right-click) to advanced (analyzing the font binary file). None require a design degree or paid subscription.

💡 Quick overview:

• Fontanello: right-click, and the font name is already in the context menu (Chrome, Firefox, Edge, iOS)
• WhatFont: hover your cursor over text, see the family, size, color and delivery service (Chrome, Safari)
• Fonts Ninja: identifies the font, shows the price, saves finds to bookmarks (Chrome)
• Built-in inspector: universal method for any browser, no extensions
• What Can My Font Do?: upload the font file, the service decodes even a renamed font

Method comparison: table

1. Fontanello, font in the context menu

Fontanello, an extension that adds the font name directly to the browser's context menu. Highlight text, right-click, choose Fontanello, and you see not only the font family but also weight, size, letter spacing and color. No additional panels, no need to activate the tool in the toolbar.

The extension works in Chrome, Firefox, Edge and on iOS. This is the fastest method of all existing ones: literally one action. No need to hover the cursor anywhere, no need to switch between DevTools tabs, right-click and the answer is right in front of you.

Pros:

• One action: right-click and result in context menu
• Supports four platforms: Chrome, Firefox, Edge, iOS
• Shows additional attributes: size, color, letter spacing

Cons:

• Does not identify renamed fonts
• Does not save history of found fonts

Fontanello, the choice for those who value speed. One click, no activation, no extra movements.

🔗 Fontanello in Chrome Web Store

2. WhatFont, hover and find out

WhatFont, one of the most popular extensions for font identification: three million users and a 4.0 rating in Chrome Web Store. The principle is simple: click on the WhatFont icon in the toolbar, hover your cursor over text, and a panel appears over the page with complete information about the font.

Unlike Fontanello, WhatFont allows you to highlight multiple text fragments simultaneously and compare fonts visually. The extension shows font family, weight, size, line height and color. A separate plus, it identifies the font delivery source: Google Fonts API, Adobe Fonts (formerly Typekit) or local @font-face.

Pros:

• Three million users, stable and proven extension
• Shows font delivery service: Google Fonts, Adobe Fonts, local
• Works in Chrome and Safari

Cons:

• Requires clicking the icon for activation, an extra action versus Fontanello
• No version for Firefox

🔗 WhatFont in Chrome Web Store

3. Fonts Ninja, designer's swiss army knife

Fonts Ninja went beyond simple font identification. In addition to the name and CSS properties, the extension shows: how many styles are available for the found font, the name of the foundry-producer, license price and, what is especially valuable, a list of similar fonts.

The built-in bookmark system saves designers hours. Found an interesting font on someone else's site, saved it to the collection directly from the extension, and later shared the list with the team. Search works by glyph shape, license type and price, convenient when you need a budget alternative to an expensive font.

The extension is used by 900 thousand people, rating 4.4. Works only in Chrome for now. By size it's heavier than WhatFont, 2 MB versus 741 KB, but the functionality justifies it.

Pros:

• Shows font price, foundry and similar alternatives
• Built-in bookmarks for found fonts
• Search by glyph shape and license type

Cons:

• Only Chrome, no versions for Safari and Firefox
• Heavier than alternatives: 2 MB versus 741 KB for WhatFont

🔗 Fonts Ninja in Chrome Web Store

4. Built-in inspector, universal method without extensions

When you don't want to install extensions or work in a browser for which they don't exist, every modern browser has a built-in tool for font identification. This is slower than extensions but requires no installation at all.

Google Chrome. Right-click on the text and choose "Inspect". DevTools panel will open. On the Styles tab find the font-family property, it lists all fonts applied to the element. The first in the list is the one rendering right now.

Firefox. Firefox has a dedicated "Fonts" tab in the inspector. Right-click → "Inspect Element" → go to the Fonts tab. You'll see not only the font name but also its weight, size and even a glyph preview, no extension has this.

Safari. First enable the "Development" menu: Safari → Preferences → Advanced → check "Show Develop menu in menu bar". Now right-click on text → "Inspect Element". In the sidebar choose "Styles, Computed" and find the font-family section.

Pros:

• Nothing to install, built into every browser
• Firefox shows glyph preview on the Fonts tab
• Works for any element, not just text

Cons:

• Slower than extensions: 10-30 seconds versus instant result
• Inconvenient for mass viewing of fonts on a page

5. What Can My Font Do?, decoding renamed fonts

A serious obstacle for all extensions and the inspector is a renamed font. When a developer assembles a custom package, the font-family name loses connection to the original: instead of Inter or Roboto you see something like custom-font-3742. Extensions are powerless, they read the CSS property, not the file itself.

The solution is the What Can My Font Do? service. The algorithm:

• Through Chrome inspector go to the Application → Frames → Fonts tab. Find the font file by matching the filename to what you see in font-family.
• Open the font file in a new tab, it will download.
• Drag the downloaded file into the What Can My Font Do? window. The service will analyze the binary data and show: the real font name, foundry, number of glyphs, language support, license and all characters in table form.

This is not an instant method, it requires a minute or two and basic understanding of DevTools. But when extensions fail against a renamed or custom-assembled font, What Can My Font Do? is the only working method.

Pros:

• Identifies renamed fonts through binary file analysis
• Shows complete information: glyphs, languages, license
• Free web service, no installation required

Cons:

• Slow: one to two minutes per font
• Requires understanding of the Application tab in DevTools

Video: how to identify a font in a minute

Watch a step-by-step tutorial of all five methods in action, from extensions to inspector:

⁉️🤔 Frequently asked questions

Are font extensions safe? Don't they collect data?

WhatFont, Fontanello and Fonts Ninja do not collect personal data and do not transmit information about visited sites. In the Chrome Web Store listing for WhatFont the developer explicitly states: the extension does not collect or use user data. Fonts Ninja requests more permissions, but this is necessary for the font bookmarking feature to work.

Can you find out a commercial font and its license price?

Fonts Ninja is the only extension from the list that shows the license price directly when hovering over text. For commercial projects this saves hours: no need to search for the font separately on MyFonts or Adobe Fonts to find out the cost.

What to do if the font is identified but can't be downloaded?

Fonts on websites are almost always protected by copyright. Finding out the name is legal. Downloading and using without a license is not. If the font is commercial (for example, from the Linotype or Monotype catalog), buy a license on the foundry's website. Free fonts are most often hosted on Google Fonts, they can be used freely in any project.

Why does Firefox show the font but Chrome doesn't?

This happens when a font is connected via @font-face with different formats: WOFF2 for Chrome, WOFF for older versions of Firefox. If the font doesn't display in Chrome, check the DevTools console on the Console tab: perhaps the font file is blocked by CORS policy or didn't load due to an ad blocker.

Which method should a frontend developer choose, and which should a designer?

For a frontend developer the built-in inspector is more convenient, it's already open in the workflow, no need to switch. For a designer, Fonts Ninja: shows price, alternatives and allows you to bookmark finds for future projects. For one-time checks "what font is this?" take Fontanello, one click and the answer is right in front of you.

Which font identification tool to choose?

The best choice depends on the task. If you're a frontend developer and the inspector is already open, stay in it, the Fonts tab in Firefox will give more information than any extension. If you're a designer searching for references, install Fonts Ninja for the bookmarks, prices and similar fonts. For quick checks Fontanello is the speed king: right-click and done.

And when no extension can handle it, renamed font, custom build, homemade package, upload the file to the What Can My Font Do? font analysis service. This is the last resort that always works.