Best Font Inspector Chrome Extensions
Last updated: May 4, 2026
Identifying the typography on a webpage is one of the small jobs designers and frontend developers do constantly: copying a font name from an inspiring site, checking the size and weight of a heading on a competitor’s page, or auditing a project’s own type system before a redesign. The Chrome Web Store has a long list of font inspector extensions and they split between two approaches, hover-to-reveal one element at a time, or audit the whole page’s typography in one go. This list ranks the five worth installing.
Feature claims are drawn from each extension’s official Chrome Web Store listing and site.
Quick Comparison
| Extension | Standout Feature | Best For |
|---|---|---|
| 1. Screen Ruler | Per-selection typography breakdown with rendered specimens | Auditing the typography of a component or whole page |
| 2. WhatFont | Hover-to-reveal font name and styles | Quick single-element font identification |
| 3. Fonts Ninja | Font DNA detection with bookmark and discovery | Designers building font libraries |
| 4. Font Finder | Element font analysis with inline property editing | Tweaking type properties without DevTools |
| 5. Fontanello | Right-click reveal with contrast info | A no-fuss right-click typography lookup |
Our Pick
1. Screen Ruler
Screen Ruler does single-element font identification, per-selection typography breakdown, and a full-page audit. Select any element on the page (a header, a card, an article, or <body> for the whole page) and the side panel lists every unique combination of font-family, font-size, font-weight, letter-spacing, and text-transform used inside that selection, each rendered as a card with a specimen in the actual typeface. Hover a card to highlight every element on the page using that style. WCAG 2.1 contrast is checked automatically.
Key Features
- Select any element to see every unique typography combination used inside it (the whole page, a single card, or anything in between)
- Each typography style rendered as a card with a specimen in the actual typeface
- Hover a typography card to highlight every element on the page using that style
- Floating inspector reveals the rendered font (the actual resolved typeface, not just the first in the font-family stack), plus size, weight, and line-height for any hovered element
- Automatic WCAG 2.1 contrast detection for text
- Pairs with element inspection, layout grids, page rulers, eyedropper, and screenshots in one extension
Summary
Best if you want font identification at any scale, from a single element to a full-page audit, with rendered specimens and contrast checks built in.
Add to Chrome2. WhatFont
WhatFont, by Chengyin Liu, is the original font identifier extension. Hover any text on any page to see the font name; click to expand the full set of applied styles. Version 3.0 was a complete rewrite that isolates the extension UI from host-website styling and supports multiple CSS colour formats.
Key Features
- Hover-to-reveal font name on any text element
- Click to expand applied font styles
- UI isolation from host-website CSS
- Multiple CSS colour formats supported
Summary
Best for instantly identifying the font on a single piece of text without setup.
View on Chrome Web Store3. Fonts Ninja
Fonts Ninja pitches itself as a designer’s workflow accelerator. Hover any text to reveal the font and its CSS properties, then bookmark the font into a personal library, look up details and similar alternatives, or filter the discovery search by classification, weight, and other parameters. The listing references a redesigned UI and a Font DNA algorithm for analysis.
Key Features
- Hover-to-reveal font name and CSS properties
- Font DNA analysis algorithm for identification
- Bookmark fonts into a personal organised library
- Discover similar fonts, search with multiple filters
- Available for Chrome, Edge, and Firefox
Summary
Best for designers building a font library and discovering similar typefaces from inspiration.
View on Chrome Web Store4. Font Finder
Font Finder by unixeco is recently maintained (last updated April 2026). The listing pitches it as a font inspector for designers, developers, and typographers: analyse the font on any selected element, copy any field to the clipboard, or adjust font properties inline on the page itself.
Key Features
- Analyse font information on the active page
- Copy element font information to the clipboard
- Adjust font properties inline on the page
- Manifest V3, recently maintained
Summary
Best for tweaking type properties on a live page without opening DevTools.
View on Chrome Web Store5. Fontanello
Fontanello, by Fred Bergman, is the lightweight right-click option. Right-click any text on the page and the extension shows the typeface, weight, size, colour, and a handful of other CSS properties, plus a contrast reading for the selected text. It’s a 16 KiB extension that does one thing well.
Key Features
- Right-click any text to reveal typography styles
- Shows typeface, weight, size, colour, plus other CSS properties
- Includes a contrast reading for the selected text
- Tiny footprint at 16 KiB
Summary
Best for a no-fuss right-click typography reveal that includes a contrast check.
View on Chrome Web StoreFAQ
What is a font inspector Chrome extension?
A font inspector Chrome extension lets you identify the fonts in use on any webpage and read the related CSS properties (size, weight, line height, letter-spacing, colour). Most variants either reveal the font on hover or right-click of a single element, or audit the whole page’s typography in one view. They’re used by designers copying fonts from inspirational sites, frontend developers verifying type systems against a spec, and typographers researching font use in the wild.
What’s the difference between a font inspector extension and Chrome DevTools?
Chrome DevTools shows font properties in the Computed pane when you select an element, but reaching that view takes opening DevTools, finding the right element, and reading through the full computed-style list. A dedicated font inspector extension surfaces the same information in one click or hover, often with a cleaner presentation, and (in Screen Ruler’s case) can produce a typography breakdown of any selected element and its subtree, including a full-page audit when the body is selected.
How accurate are these extensions?
For fonts loaded via the page’s own CSS (web fonts, local fonts, system stacks), the extensions read the computed font-family value the browser is actually using, which is exactly what gets rendered. Where extensions differ is in fallback handling: if the first font in the stack fails to load and the browser uses a fallback, some extensions show the fallback (the truth) and some show the first declared family (the intent). Screen Ruler reads computed styles, so what you see is what the browser used.
Which font inspector audits the typography of an entire selection or page?
Screen Ruler. Select any element (a header, a card, an article, or the body for a full-page audit) and the side panel lists every unique combination of font-family, font-size, font-weight, letter-spacing, and text-transform inside that selection, each rendered as a card with a specimen in the actual typeface. Useful for finding stray styles, duplicated weights, or accidental size variants in a component or project type system.
Are these extensions safe to install?
Reputable font inspector extensions only read the rendered DOM and computed CSS locally, and don’t transmit your browsing data. Before installing any of them, check the requested permissions on each Chrome Web Store listing. A font inspector should typically only need activeTab and scripting, and shouldn’t need broad access to your full browsing history or personal data.
Will they work in Brave, Edge, Arc, or Vivaldi?
Yes. Font inspector extensions install via the Chrome Web Store and run on every Chromium-based browser. Screen Ruler requires Chrome 116 or later (or the Chromium-based equivalent of that version).