The font inspector that actually does something — identify any font, swap it live, and ship it to your design system.
GetFont is a free, open-source Chrome extension that answers the question "what font is this website using?" in a single click — and then lets you do far more with the answer. Hover any text, and a clean panel pops up with the real rendered typeface, weight, size, line-height, color, and source (Google Fonts, Adobe Fonts, locally hosted @font-face, or system stack). No reload, no signup, no telemetry.
If you've ever used WhatFont, Fonts Ninja, Font Finder, or WhatTheFont and wished they did more — that's why GetFont exists.
Click any heading, paragraph, or button on a page and instantly see the font family that's actually rendered (not just the first one declared in CSS), its font weight, font size, line-height, letter-spacing, color, and where the file came from. A separate All fonts tab shows every typeface used on the entire page, grouped by family, counted by usage, and rendered in itself so you can compare at a glance — useful for competitor research, brand audits, and design inspiration.
GetFont lets you swap fonts live on any website without reloading. Click "Replace with another font", start typing — autocomplete suggests from 300+ Google Fonts and system fonts — and the entire page re-renders in your pick. Want to see what Stripe looks like in Playfair Display, or your client's marketing site in Inter instead of Helvetica? Two clicks. Iterate as many fonts as you want; no reload required.
This is what no other font identifier does: full variable fonts support with interactive sliders for weight (wght), width (wdth), slant (slnt), and optical size (opsz). Click any text, drag the sliders, and watch that exact element morph live. Axes the font doesn't actually support are automatically greyed out — no guessing, no broken renders.
Looking for an alternative to a paid font? A web-safe substitute? A pairing? GetFont includes hand-picked alternatives for 80+ popular typefaces — for example, ask it about Helvetica and you'll get Inter, Roboto, Source Sans 3, Manrope. For everything else, it classifies the font (serif, sans-serif, monospace, display, handwriting) and suggests matches from the same category. One click applies any suggestion live so you can compare side-by-side with the original.
GetFont turns any website's type stack into ready-to-use code:
- CSS with
@font-faceblocks and automatic Google Fonts@importstatements - Tailwind CSS config —
fontFamily,fontSize,fontWeightextending your theme - SCSS variables and maps
- TypeScript tokens typed for styled-components, Emotion, vanilla-extract, or your own design system
- JSON with full metadata for any tooling pipeline
One dropdown, five formats, no manual copy-paste from devtools.
There are good tools already, but each has gaps. GetFont was built to close them.
| WhatFont | Fonts Ninja | Font Finder | GetFont | |
|---|---|---|---|---|
| Identifies fonts | ✓ | ✓ | ✓ | ✓ |
| Real rendered font (not just declared) | — | ✓ | ✓ | ✓ |
| Source detection (Google Fonts / Adobe Fonts / @font-face) | ✓ | ✓ | — | ✓ |
| All fonts on the page, grouped | — | ✓ | — | ✓ |
| Live preview — swap any font instantly | — | ✓ | inline | ✓ |
| Autocomplete picker (300+ fonts) | — | — | — | ✓ |
| Variable fonts sliders with auto-disable | — | — | — | ✓ |
| Live element tweak (size, weight, axes) | — | — | — | ✓ |
| Find similar fonts | — | partial | — | ✓ |
| Export to Tailwind / SCSS / TS tokens | — | — | — | ✓ |
| No page reload required | — | ✓ | ✓ | ✓ |
| Shadow DOM isolation (won't break on hostile CSS) | — | — | — | ✓ |
| Free, no account, no signup | ✓ | partial | ✓ | ✓ |
| Open source | — | — | ✓ | ✓ |
If you're looking for a WhatFont alternative, a Fonts Ninja alternative, or just a faster, more capable font finder for Chrome, GetFont is built for you.
- Web designers identifying typography on inspiration sites and competitor pages
- Brand strategists auditing typeface usage across client websites
- Frontend developers copying real CSS values during design implementation
- Design system engineers generating Tailwind / SCSS / TypeScript tokens from existing sites
- Typography enthusiasts exploring variable fonts and discovering similar typefaces
- UI/UX teams quickly prototyping font substitutions without touching code
(Coming soon — currently distributed via GitHub for early adopters)
- Download this repository as a ZIP or clone it:
git clone https://github.com/pretnicx/getfont.git - Open
chrome://extensions/in your browser - Enable Developer mode using the toggle in the top-right corner
- Click Load unpacked and select the GetFont folder
- Pin the GetFont icon to your toolbar, open any website, and click it
A Firefox port is on the roadmap.
Does GetFont work on every website?
It works on any normal webpage. It cannot run on browser-internal pages like chrome:// or the Chrome Web Store — that's a browser limitation, not ours. When you try, GetFont tells you clearly instead of failing silently.
Will it break the site I'm inspecting?
No. All UI lives in a closed Shadow DOM, fully isolated from the page's CSS. Hostile stylesheets, !important overrides, and aggressive universal selectors can't reach our panel.
Do you collect any data? No. Zero telemetry, zero analytics, zero servers. The extension reads only the page you actively inspect, and stores your last 200 inspections locally on your device. See PRIVACY.md.
Does it identify fonts inside images? Not yet. Image font recognition (à la WhatTheFont) needs either a hosted backend or an API key — we're evaluating options. For now, GetFont identifies fonts rendered as actual text.
Will it slow my browser down? No. GetFont uses programmatic injection — the inspector script loads only when you click the toolbar icon. Zero memory overhead the rest of the time.
- Manifest V3 — current Chrome extension standard
- Vanilla JavaScript + ES modules — no framework, content script stays under 100KB
- Shadow DOM (closed mode) — total UI isolation from page styles
- Programmatic injection via
chrome.scripting.executeScript— on demand, not constant chrome.storage.local— local persistence without any backend
See ROADMAP.md for what's coming.
GetFont does not collect any data. Everything runs locally on your machine. No telemetry, no analytics, no sign-up, no account. See PRIVACY.md for the full policy.
Issues, ideas, and pull requests are very welcome at https://github.com/pretnicx/getfont.
If you've found a website where the inspector behaves oddly, please open an issue with the URL — we test against a wide variety of sites, but the web is large.
For search discovery: font inspector, font identifier, font finder, font detector, what font is this, what font is being used, identify font on website, Chrome extension for fonts, web font inspector, CSS font inspector, variable font tester, Google Fonts identifier, Tailwind font config generator, WhatFont alternative, Fonts Ninja alternative, Font Finder alternative, typography tool, design system tool, free font tool, open-source font extension.