Which font is this? Chrome DevTools knows, in a section most people never scroll to

Every front-end developer has done it: right-click, Inspect, read font-family, and announce the answer. Half the time that answer is wrong, because font-family is a wish list. The browser may have drawn something else entirely.

Chrome already knows which font it used. It tells you at the very bottom of the Computed tab, in a section called Rendered Fonts. Here is the whole route, plus the places where it goes wrong.

1. Select the element that holds the words

Right-click the text and choose Inspect, or press Ctrl + Shift + C (Cmd + Shift + C on a Mac) to open DevTools with the element picker already on.

The picker tooltip shows a font line. Treat it as a preview, not a verdict: it reports the declared family.

Make sure you land on the element that directly contains the text, not a wrapper div around it. font-family is inherited, so a wrapper reports a perfectly plausible stack while the real text node two levels down is styled differently.

2. Computed, not Styles

The side pane opens on Styles, which lists every rule that touches the element, including the ones that lost the cascade. Switch to Computed and type font in the filter. You get one final value per property:

3. Scroll to Rendered Fonts

Below the last property there is a small section called Rendered Fonts. It does not come from CSS. It is a report from Chrome's text layer about what it actually painted for the selected element:

• Font name: the name stored inside the font file. It can differ from the alias in the CSS.
• Network resource: a web font the page downloaded through @font-face.
• Local file: a font installed on your machine. Either a system fallback or a font the site expects you to have.
• Glyph count: how many characters of the element's text were drawn with that font.

When the first name in font-family and the rendered font do not match, you are looking at a fallback.

Several fonts can be listed for one element because browsers pick a font per character, not per element. Most glyphs from the brand font and two from an emoji font is normal. Every glyph from Arial while the stack starts with a web font means the web font never loaded.

One trap: if you happen to have the site's font installed, Chrome may use your copy and report a local file. Visitors without it see the next font in the stack. Check on a clean machine when it matters.

4. Where the files come from

Rendered Fonts names the font. For the files and the weights, two more places:

Network panel, Font filter. Reload with DevTools open, because it only records what it sees. Each row is a font file. The domain is the fastest clue: fonts.gstatic.com is Google Fonts, use.typekit.net is Adobe Fonts, the site's own domain means self-hosted.

Search for @font-face. Press Ctrl + Shift + F (Cmd + Option + F) with DevTools focused to search every loaded file. The rules show which weights really exist, so you can tell a true bold from one the browser faked:

@font-face {
  font-family: "Site Serif";
  src: url("/fonts/literata-400.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Site Serif";
  src: url("/fonts/literata-700.woff2") format("woff2");
  font-weight: 700;
}

If you prefer the Console, $0 is the selected element:

getComputedStyle($0).fontFamily;

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

The second snippet lists web fonts only. System fonts never appear in document.fonts.

5. Four ways to get the wrong answer

1. You selected a wrapper. Rendered Fonts describes the selected node's own text. No text, no section.
2. The text is in an iframe. Inspect still works, but the Console runs in the top document by default. Switch the JavaScript context selector to the frame before running the snippets.
3. The text is in Shadow DOM. Expand #shadow-root in the tree to reach the real element. Inherited properties such as font-family pass through from the host.
4. The text is a pseudo-element. ::before and ::after show up as their own nodes; select them directly. ::first-line has no node at all, so read its rules in the parent's Styles tab.

The one-click version

We check fonts on other people's sites every day, and the route above is a lot of clicks. So we built Font Inspector, a free Chrome extension that puts the same facts in one panel next to the text: the declared family and the rendered font side by side with a fallback flag, size in px, em and rem, line height as a ratio, where each family comes from, every font on the page ranked by share of text, and copy as CSS, Tailwind or SCSS. No account, nothing uploaded.

DevTools is still the right tool for editing CSS live or debugging why a font file failed to load. For "what font is this", Rendered Fonts is the honest answer, and now you know where it hides.

The long version of this guide, with the Edge and Brave notes and more on fallbacks, is on font-inspector.com.