How to find what font a website is using

Last updated: September 7, 2026

You have found a site with typography you like and you want to know what it is. The font name alone is rarely enough. You usually need the weight, the size, the line height, and whether the heading and the body are even the same family.

Here are the four methods that actually work, in increasing order of how quickly they get you an answer. Menu names below are from Chrome 152.

Method 1: read it from DevTools

This works in every browser and installs nothing.

Right click the text you care about and choose Inspect.
In the Elements panel, look at the Computed tab rather than Styles. Styles shows what the CSS asked for, Computed shows what the browser actually used after fallbacks.
Find font-family. The first name in the list is the one being applied only if it loaded successfully.
Read font-size, font-weight and line-height from the same panel.

The catch is the fallback problem. A page may declare font-family: Inter, Helvetica, sans-serif while actually rendering Helvetica because Inter failed to load. Computed style still lists the whole stack, so it does not tell you which one won. Chrome does show the rendered font at the very bottom of the Computed pane, under a heading that is easy to miss.

Method 2: list every font from the console

If you want the whole page at once rather than one element at a time, the Font Loading API can tell you which webfonts the browser actually downloaded. Paste this into the console:

[...document.fonts].filter(f => f.status === "loaded").map(f => `${f.family} ${f.weight}`)

The status filter matters. document.fonts holds one entry per @font-face rule the moment the CSS is parsed, whether the file was ever requested or not, so without it you get every declared face including the ones that failed. Compare the result against the families the page asks for:

[...new Set([...document.querySelectorAll("*")].flatMap(el => getComputedStyle(el).fontFamily.split(",").map(s => s.trim().replace(/["']/g, ""))))]

One caveat before you read too much into the difference. Locally installed fonts never appear in document.fonts, because nothing was downloaded. A family missing from the first list is either a declaration the browser ignored or a font already on the machine, and this will not tell you which.

Method 3: check what the page downloaded

If you want the real font files rather than the CSS declaration, open DevTools, go to the Network tab, filter by Font, and reload. You get every woff2 the page fetched, which tells you what is genuinely in use and where it is hosted.

This is the most reliable method and the slowest. It also does not tell you which element uses which file, so you still have to cross reference against the elements you care about.

Method 4: hover and read it

Every method above makes you leave the page, open a panel, and assemble the answer from two or three places. A dedicated inspector collapses that into hovering the text.

With Screen Ruler installed, activate the inspector and move the pointer over any text. The floating readout shows the rendered family, the weight, the size and the line height together, for whichever element is under the cursor. Press Space to pin the readout so you can move to a second element and compare them side by side, which is the fastest way to answer "is the heading the same family as the body".

It works out which font actually rendered by measuring glyph widths rather than reading the declared stack, so the fallback problem in method 1 mostly goes away. Where two candidates measure identically it falls back to reporting the stack. The floating inspector is a paid feature.

What else is worth knowing

Icon fonts look like text but are not. If the readout shows a family you do not recognise and the characters are boxes, you are looking at an icon font, not body type.
Variable fonts report a weight that may not be a round number. A weight of 437 is normal and means the page is using a variable axis rather than a fixed cut.
Licensing is separate from identification. Knowing a site uses a typeface does not tell you whether you can use it. Check the foundry before you commit to it in a design.

Common questions

Can I identify a font inside an image?

No. Every method here reads the CSS or the downloaded files, so it only works on real text. For type inside a screenshot or logo you need a visual matching service instead.

Why does the site show one font and DevTools say another?

Almost always a failed webfont load, so the browser fell back down the stack. Method 3 settles it: if the font file is not in the Network tab, it did not load.

Does this work on text inside an iframe?

Yes, though DevTools requires you to switch execution context to the frame first. An inspector that works on hover handles it without the extra step.