List All Fonts

List All Fonts inspects the rendered page and reports every font family actually in use — not just the ones declared in a stylesheet, but the ones the browser resolved and painted.

Reading the List

The panel opens with a count of how many families it found. Each entry shows:

• Family name — the resolved font, such as Google Sans Flex or JetBrains Mono
• Category tag — Sans, Serif, or Mono
• Sample text — rendered in that font, pulled from real content on the page

Because the sample uses text that's actually on the page, you see each font in the context where it's used: a display face previewed with a headline, a mono face previewed with a code snippet.

Why the Sample Text Varies

The preview isn't always the classic pangram. When a family appears in only one place — a code block, a label, a script tag — the tool previews it with that text. A font used only inside a third-party embed will show the embed's text, which is a useful reminder that you don't control every font a page loads.

Common Findings

More families than you expected — themes, widgets, and embeds quietly add their own. A page you thought used two fonts often resolves to five.

Fallbacks doing the work — names like ui-sans-serif and SF Mono mean the page is relying on an operating system default rather than shipping a webfont. The rendered result will differ across platforms.

A category missing entirely — a page with no Mono entry has no code-in-prose styling, which is worth knowing before you write a tutorial for it.

Tips

• Pair this with the Font Changer to swap a family and preview the change live
• If you're auditing performance, a long list is a signal: each webfont is a separate network request and a separate chance at a flash of unstyled text
• Use the list to infer the type scale — the families and weights present tell you which ones the design actually leans on