Family and loaded weights
Know which variants you need, not just the name
Typography
What font a website uses, with its license and type scale
Smart Design Inspector shows which fonts a website uses, their weights, where they load from (Google Fonts, Adobe Fonts or the site’s own server), their license and the page’s type scale: every style with its size, weight and line height.
Fonts, source, license and scale: free forever
Fonts · yourclient.example
- Inter300 · 400 · 500 · 600Google FontsOFL
- Playfair Display400 · 400 italic · 700Google FontsOFL
- JetBrains Mono400Self-hostedOFL
- H164 px · 500 · 1.04
- H236 px · 500 · 1.1
- H317 px · 500 · 1.3
- Body16 px · 300 · 1.55
- Button15 px · 500 · 1
01
How to find out what font a website uses
3 steps- 01
Install Smart Design Inspector and open the website.
- 02
Click the icon and choose Fonts.
- 03
You get the list of families with their weights and source. Hover over any text to see its exact style.
Without an extension
You can also do it without an extension: right-click the text, choose Inspect and look for font-family in the styles panel. The problem is that font-family tells you which font was requested, not whether it loaded, where it comes from or what license it has.
02
Try it on this page
No installA sample website and the fonts panel, with nothing to install. Hover over any text, or pick it from the list, to see its family, weight, size, line height, source and license.
Pick an element
Smart Design Inspector · Fontsh1.hero-title
- Family
- —
- Weight
- —
- Style
- —
- Size
- —
- Line height
- —
- Letter spacing
- —
- Source
- —
- License
- —
Families on the page
—
Sample website · values are read from this page
03
More than the font name
4 detailsSource: Google Fonts, Adobe Fonts or self-hosted
Know whether you can use it for free or need to buy it
License
Google Fonts are OFL. For the rest, it reads the license declared in the font file itself
Type scale
H1 to H6, body and buttons with size, weight, line height and letter spacing
The scale is what you need to replicate the style, and font extensions only look letter by letter. With Pro you export it to Tailwind or CSS variables: extract the design system.
| Free€0forever | Pro€49one-time payment | |
|---|---|---|
| Page fonts: family, weights, sizes, source and license | ||
| Type scale: every text style with font, size, weight, line height and letter spacing | ||
| Export the text styles to Tailwind v4 @theme, CSS variables or DESIGN_SPECS.md | — | Free early access |
05
What it doesn’t do
LimitsIt doesn’t download paid fonts. It shows you the license and where to get them. If the font has a free license, you can download it. It also doesn’t identify fonts from an image: tools like WhatTheFont exist for that.
Is it free?
Yes. Seeing the fonts, their source, their license and the scale is free forever.
Does it detect Adobe Fonts?
Yes. It detects fonts loaded from Adobe by the address they come from.
What if the website uses a system font?
The extension tells you no web font is loaded and shows the declared family.
Can I use the font I find?
It depends on its license. Google Fonts can be used in any project. Commercial fonts have to be bought, even if another website uses them.
Does it work with text inside images?
No. It reads the page’s text, not text inside an image.
Which browsers and operating systems does it work on?
Chrome, Edge, Brave, Arc, Opera and Vivaldi, on Windows, Mac and Linux, from version 1.0. It works the same everywhere because the browser runs the extension, not the operating system. The code is ready to be brought to Firefox and Safari without a rewrite. While it’s in development, things may change.
07
Keep exploring
Related featuresColors
The page palette, an eyedropper and the WCAG contrast of every text and background pair.
Website colors →Design system
Colors, spacing and typography to Tailwind v4 @theme, CSS variables or DESIGN_SPECS.md.
Extract the design system →CSS inspector
Hover to see the computed CSS, box, margins and distances.
CSS inspector →Waitlist
Be one of the first to try it
Smart Design Inspector is in development. Leave your email and we’ll let you know the day it goes live on the Chrome Web Store, with the 3 Pro features free in early access.
One email on launch day and very few more · Unsubscribe in one click