How to find what font a website uses

Four ways to identify the typeface on any page, from a one-second hover to reading the font file the browser downloaded — and the parts of the answer a font name alone leaves out.

Updated October 2026 · by the Design Toolkit team

There is a catch worth knowing before you start. A page's CSS does not name one font — it names a stack, like "Söhne", Helvetica, Arial, sans-serif. The browser walks that list and uses the first family it can load and that covers the characters on screen. So the font written in the stylesheet and the font you are looking at are often not the same thing, and only one of the four methods below tells you which is which.

1. Hover the text with a font inspector

The fastest route. A font inspector extension reads the rendered element under your cursor and shows the family, weight, size, line height and letter spacing together, without you leaving the page or opening a panel.

This is what Design Toolkit does with Alt+R: hover any text and the readout gives you the family that actually rendered, the weight as a number, the size in pixels, the line height as a ratio and the tracking. Click, and it stays pinned so you can compare two headings side by side.

Any of the font inspectors in the Chrome Web Store will get you the family name. What separates them is how much of the rest of the type they report, and whether they tell you the rendered font or just repeat the CSS stack.

2. Read it in DevTools

No install, works in every desktop browser:

3. List every font on the page from the console

Hovering answers one element. When you want the whole page's typography — how many families it really uses, at what weights — one line in the console is quicker:

[...new Set([...document.querySelectorAll('*')]
  .map(el => getComputedStyle(el).fontFamily))]
  .sort()

That returns every distinct font stack in use. Swap fontFamily for fontWeight or fontSize and you get the same view of the weights and sizes a page is built on, which is usually a much shorter list than people expect.

4. Check what the page downloaded

The most literal answer: look at the font file itself.

Open DevTools, go to Network, filter by Font, and reload. You will see the .woff2 files the page fetched. The filenames usually name the family outright, and the domain tells you something useful about licensing: a file from fonts.gstatic.com is a Google font you can use freely, while one served from the company's own domain is usually licensed to them alone.

What the font name alone doesn't tell you

Knowing a page uses Inter gets you maybe half of what you are looking at. The rest is in the numbers:

• Weight. Inter at 600 and Inter at 400 read as different typefaces at a glance. Read the number, not "it looks bold".
• Size and line height. A heading at 44px with a line height of 1.15 sets completely differently from the same heading at 1.5.
• Letter spacing. Large headings are usually tracked in — often -0.02em or tighter. Leave it out and your version reads loose and unfinished.
• Variable axes. A variable font can be set to a width or optical size that no static weight will reproduce. Look for font-variation-settings.
• Numerals. font-variant-numeric: tabular-nums changes the shape of every digit — noticeable in pricing tables and dashboards.

When you can't use the font you found

This is the common ending: you identify the font and it turns out to be licensed to that company. The professional answer is not to find "something similar looking" by eye — it is to match the measurements that make two sans-serifs read alike:

• x-height ratio — the height of a lowercase x divided by the font size. This is the single biggest driver of whether two fonts feel the same at a glance, and CSS has a property for it: font-size-adjust.
• Cap height ratio — the same for capitals.
• Set width — how wide a fixed string renders. Once the x-height matches, letter spacing closes whatever width is left over.

Design Toolkit measures all three on the page where the font really is loaded, and hands them to you, so a substitute can be tuned to the original rather than guessed at. That is the part that turns "close enough" into a match.

5. Read the @font-face rules in the page source

Open the page source with Ctrl + U (or the Sources panel) and search for @font-face. Each rule names a family, the file it loads in src, the weights it covers and sometimes a unicode-range. Fonts served by Google show up as a link to fonts.googleapis.com with the family name in the address.

This tells you what the site can load. Rendered Fonts (step 2) tells you what it used for the text you care about. When the two disagree, trust Rendered Fonts.

What about online font checkers?

A website font checker takes a URL and lists the families on the page. That is quick for an overview, but it cannot tell you which font a particular headline used, and it misses pages behind a login. Hovering the text, or reading Rendered Fonts, answers that exactly.

Common questions

Read next