How to Find Font on a Website | Identify Any Typeface in Seconds
Font and Typography Inspector
Quick Answer
- Install the free CSSPeek font inspector for Chrome or a Chromium-based browser.
- Open the website, activate CSSPeek and click the text you want to inspect.
- Read the font family, rendered font, weight, size, line height, letter spacing and text color.
- Check the complete font stack so you can see whether the intended web font or a fallback is being used.
- Use Chrome DevTools or a font-image identifier when the text is inside an image, canvas or inaccessible frame.
To find a font on a website, you do not need to guess from the letter shapes or search through several stylesheets. A font inspector reads the typography that the browser has already calculated for the selected text.
The important detail is that a website can declare several fonts in one stack. The first name written in the CSS is not always the font currently visible on your screen. A failed download, missing character or unavailable local font can cause the browser to use a fallback.
Current Font-Inspection Benchmarks
4 Numbers That Show Why Font Inspectors Matter
3 Clicks
CSSPeek workflow
Pin the extension, activate it and click the text you want to inspect.
10
Focused CSS properties
CSSPeek surfaces the focused properties most users need instead of hundreds of computed values.
3 Million
WhatFont users
The Chrome Web Store currently reports approximately three million WhatFont users.
2.1K+
WhatFont ratings
Thousands of ratings show how common website-font identification has become.
Extension user and rating counts change over time. Figures were checked in July 2026.
Find the Method You Need
Which Font Details Should You Inspect?
The font name alone is rarely enough to recreate the typography accurately. Two elements using the same family can look different because of weight, size, spacing or line height.
| Typography Detail | What It Tells You |
|---|---|
| Font family | The ordered family stack declared in CSS. |
| Rendered font | The family selected by the browser for the inspected characters. |
| Font weight | How light, regular, medium or bold the text appears. |
| Font size | The final pixel size after rem, em, percentage or clamp calculations. |
| Line height | The vertical distance assigned to each line of text. |
| Letter spacing | Extra or reduced space between characters. |
| Text color | The computed RGB or RGBA color displayed by the browser. |
| Style and transform | Italic, uppercase, decoration and related text treatment. |
CSSPeek’s dedicated typography inspector puts these computed values together in one focused panel.
Fastest Method: Find a Website Font with CSSPeek
Install and pin CSSPeek
Install the extension from CSSPeek, then pin it beside the browser address bar for quick access.
Open the target website
Let the page finish loading so its web fonts and dynamic components have time to render.
Activate the inspector
Click the CSSPeek icon on the current tab. The extension activates only after your click.
Click the exact text element
Select the heading, paragraph, button or navigation label whose font you want to identify.
Read the typography panel
Review the full stack, selected font, computed size, weight, line height, letter spacing, alignment and color.
Why computed typography is useful
If a stylesheet uses 1.125rem, clamp() or inherited values, CSSPeek reports the final pixel result produced in that element’s current context.
Free CSS Inspector
See the exact typography behind any text element.
Identify the font stack, rendered family, size, weight, line height, spacing and color without searching through DevTools panels.
Inspect a Website FontHow to Find a Font with Chrome DevTools
Chrome DevTools works when you do not want to install an extension or when you need deeper loading and network information.
- Right-click the text and select Inspect.
- Open the Computed panel.
- Search for
font-family,font-size,font-weightandline-height. - Scroll to Rendered Fonts to see the font used for the selected text.
- Open Network and filter by “font” when you need to inspect WOFF, WOFF2 or other downloaded font resources.
Do not copy only the first family name
A declaration such as Inter, system-ui, sans-serif describes priority. It does not prove that Inter successfully loaded or rendered every character.
Declared Font Stack vs Rendered Font
| Term | Meaning | Example |
|---|---|---|
| Declared stack | The prioritized list written in CSS. | Inter, system-ui, sans-serif |
| Rendered family | The font selected for the current characters and device. | Inter, Segoe UI or another fallback |
| Loaded font file | A font resource downloaded or available locally. | inter-latin.woff2 |
Browsers can select fonts character by character. A Latin heading and an emoji or non-Latin character inside it may therefore use different rendered fonts even though they share one CSS declaration.
For a broader workflow covering typography, colors, spacing and shadows, read CSSPeek’s guide to finding website design values.
How to Find Every Font Used Across a Website
Clicking individual elements is best when you need the exact rendered typography. A whole-site report is faster when you are auditing a design system or collecting every declared font family.
Use per-element inspection when
- You need the actual rendered font.
- The page changes after JavaScript runs.
- You need size, weight and line height.
Use a site report when
- You need every declared family quickly.
- You are reviewing a public design system.
- You also need colors, spacing and shadows.
Paste a public URL into the free CSSPeek Site Style Report to extract font families declared in accessible stylesheets.
Report limitation
A stylesheet report may miss typography injected only at runtime, hidden inside Shadow DOM or loaded by JavaScript without a matching CSS declaration. Use live inspection for those cases.
What If the Font Is Inside an Image?
A CSS font inspector works on real webpage text. It cannot read typography baked into a JPG, PNG, banner, logo or screenshot because that text is no longer represented by HTML and CSS.
| Text Source | Best Method |
|---|---|
| Live heading, paragraph or button | CSSPeek or Chrome DevTools |
| Text inside a screenshot | Image-based font identifier |
| Text drawn on a canvas | Inspect the application code or use an image identifier |
| Logo converted to SVG paths | Visual font matching; CSS inspection will not reveal the family |
Image-based tools compare letter shapes and suggest likely matches. Their answer is an estimate, while CSS inspection reads the website’s actual style information.
How to Inspect Variable Fonts
A variable font can contain several adjustable axes inside one font file. The family name alone may not reproduce the typography you see.
| Common Axis | Controls |
|---|---|
wght |
Font weight |
wdth |
Character width |
slnt |
Slant angle |
opsz |
Optical sizing |
Record the applied weight, width or slant values along with the family name. CSSPeek’s typography panel reports resolved variable-font axes when they are available.
Can You Extract a Font File from a Website?
DevTools may reveal the URL of a WOFF or WOFF2 resource loaded by a public page. Seeing the file request does not grant permission to reuse, redistribute or self-host the typeface.
- Identify the font family first.
- Find the official foundry, marketplace or open-source repository.
- Check desktop, web, application and commercial licence terms.
- Download the font only from an authorized source.
- Use a licensed alternative when the original is proprietary.
Use font inspection for research, debugging and design analysis—not to bypass a font licence.
Font Inspector vs DevTools vs Image Identifier
| Method | Best For | Main Limitation |
|---|---|---|
| CSSPeek | Fast per-element typography inspection | Cannot inspect browser-restricted pages or cross-origin frames |
| Chrome DevTools | Rendered-font and network debugging | More panels and technical detail to navigate |
| Site Style Report | Collecting declared font families across a public site | May miss runtime-only styles |
| Image identifier | Screenshots, posters, logos and rasterized text | Returns visual matches rather than guaranteed CSS data |
Why a Website Font May Be Hard to Identify
The web font failed to load
The browser may be showing a fallback from the declared stack.
Text is inside an image
There is no HTML text or font-family declaration for an inspector to read.
The text uses several fonts
Fallbacks may be selected for emoji, symbols or unsupported language characters.
The element is inside an iframe
Browser security prevents extensions from inspecting some cross-origin frames.
CSSPeek uses a user-activated permission model and reads styles only on the tab where you activate it. Its permissions page explains the extension’s local processing and access model.
Website Font Inspection Checklist
✓ Selected the exact text element instead of its surrounding container.
✓ Recorded both the declared stack and the rendered font.
✓ Copied the font weight, size and line height.
✓ Checked letter spacing, color and text transform.
✓ Confirmed that the intended web font finished loading.
✓ Recorded variable-font axes where applicable.
✓ Verified the font licence before using it in another project.
Stop guessing which font a website uses.
Click any text element and see its complete computed typography, rendered family, selector, spacing and colors in one focused panel.
Install CSSPeek FreeFrequently Asked Questions
How do I find the font used on a website?
Activate a website font inspector and click the text element. It should show the font stack, rendered family, size, weight, line height, spacing and color.
Can Chrome identify a website font without an extension?
Yes. Right-click the text, choose Inspect and use the Computed panel. The Rendered Fonts section can show which font Chrome selected.
Why does the font-family list show several fonts?
The list is a fallback stack. The browser tries the available families in priority order and may use later fonts for missing characters.
Can a font inspector identify text inside an image?
No. Text inside an image is made of pixels rather than live HTML. Use an image-based font identifier to find likely visual matches.
What is the difference between a font stack and a rendered font?
The stack is the prioritized list declared in CSS. The rendered font is the family the browser actually selected for the current characters.
How do I know whether a web font loaded?
Compare the declared stack with the rendered family, then check Chrome’s Network panel for the font resource or inspect the document’s loaded font set.
Can I download a font after finding it on a website?
Only through an authorized source and under a licence covering your intended use. A public font-file request does not remove the font’s licensing restrictions.
Does CSSPeek work on React and other dynamic websites?
Yes. CSSPeek inspects the current rendered DOM, so updated elements can be inspected again after React, Vue, Svelte or another framework re-renders them.
Sources and Research Notes
- MDN font-family syntax, fallbacks and character-level font selection.
- MDN Document.fonts and the CSS Font Loading API.
- Chrome DevTools rendered-font and local-font debugging guidance.
- CSSPeek typography-inspector documentation.
- Competitor research included WhatFont, Fonts Ninja, WhatFontIs and image-based font-identification tools.
- Extension user and rating counts were checked against the current Chrome Web Store listing in July 2026.