# Check where each font is used on a webpage

[Open the live Fudge conversation](https://design.withfudge.com/share/check-where-each-font-is-used-on-a-webpage)

Last updated: 2026-08-25

The fastest way to check where each font is used on a webpage is to map each family to a visible role: interface text, headings, code, labels, or editorial copy. Then verify the family, weight, size, and line height for representative elements instead of treating the page as if it uses one font everywhere.

## Use a simple font-mapping checklist

Review the page in this order:

1. **Primary interface text:** navigation, buttons, forms, body copy, and general labels.
2. **Display or editorial text:** hero headings, section titles, quotes, or marketing statements.
3. **Technical text:** code samples, keyboard commands, numbers, table values, or developer-facing labels.
4. **Supporting text:** captions, metadata, badges, footnotes, and status messages.
5. **Responsive states:** check whether the family, size, or weight changes at narrower widths.

For each role, record the font family, fallback stack if visible, weight, size, line height, letter spacing, and casing. This gives you a usable typography map rather than a list of font files with no context.

Open the example below and compare the captured typography choices before borrowing a pattern. It shows a Linear reference with three observed families: Inter Variable, Berkeley Mono, and Tiempos Headline.

## Captured pages

[![Linear typography](https://pin.fontofweb.com/4902?format=jpg)](https://design.withfudge.com/share/pin-4902)

[Linear typography](https://design.withfudge.com/share/pin-4902)

## Fonts captured on linear.app

- **Inter Variable** — weight 400 · Primary sans serif in the captured Linear typography system.
- **Berkeley Mono** — Supporting monospace typeface in the captured system.
- **Tiempos Headline** — An occasional editorial display face in the captured system.

## How to tell where a family is used

Start with repeated visual evidence. If the same family appears across navigation, buttons, and paragraphs, it is probably serving as the main interface face. A family that appears only in code-like labels or technical examples is likely a supporting monospace face. A higher-contrast or more editorial face limited to large headings may be a display choice rather than the page's default text font.

Do not identify a font from one letterform alone. Compare several samples, including numerals, punctuation, uppercase letters, and lowercase pairs such as "a," "g," and "e." Also check whether the apparent difference comes from weight, size, tracking, or rendering rather than from a separate family.

## A practical inspection workflow

Capture the page at a stable viewport and inspect the major sections from top to bottom. For every distinct text treatment, save one example with its surrounding component. This matters because the same family may serve several roles with different weights and line heights.

Next, group identical families together and sort the results by role. A useful final table looks like this:

| Role | Family | Weight | Size and line height | Example |
|---|---|---:|---|---|
| Interface | Inter Variable | 400 | body scale | navigation or paragraph |
| Technical | Berkeley Mono | verify in capture | code scale | code or data label |
| Display | Tiempos Headline | verify in capture | heading scale | editorial heading |

Treat values as observations to verify, not assumptions. A captured page can include variable font axes, local overrides, or components that use a different style from the main page.

## What to copy and what to question

Copy the relationship between roles before copying the font names. A strong system often has one dependable interface face, a clearly separated technical face, and a display face used sparingly. Ask whether each distinction improves scanning, hierarchy, or context. If two families do not create a meaningful difference, simplify the system.

Before using a font in a new project, separately verify its license, available weights, language coverage, and performance needs. The inspection tells you what the page visibly uses; it does not establish ownership of an official internal design system or prove licensing terms.

## Use this in your AI agent

> Check this webpage's typography by role. Identify the font family used for interface text, headings, technical text, and supporting labels. For each family, report representative elements, observed weight, size, line height, casing, and letter spacing. Separate confirmed observations from values that need manual verification, then summarize the smallest practical font system I could reuse.

[Install Fudge for your AI agent](/mcp)

---

Compare the family identity before comparing weight. Pick samples from body copy, headings, buttons, numerals, and technical labels, then look at distinctive shapes such as lowercase "a" and "g," the width of numerals, punctuation, and the terminals on letters. If those shapes remain consistent while thickness and spacing change, the page may be using one family with multiple variants.

Then check the declared font files or observed variants for the same family. A variable font can produce many weights without changing the family name. Conversely, a page may use a sans serif for interface text and a serif or monospace face for a separate role. Record the role and surrounding component for each sample so a display treatment is not mistaken for the default body font.

The Linear example is useful as a comparison point because its captured reference lists Inter Variable, Berkeley Mono, and Tiempos Headline as separate observed choices. Use that as evidence for role separation, not as a rule that every page needs three families.

---

Save a compact typography inventory with one row per role. Include the family name, source or file if available, weight, size, line height, letter spacing, casing, color, and a screenshot or component reference. Add a confidence note when a value is only visually estimated.

Next, turn the inventory into decisions: choose the primary interface family, list only the weights you actually need, decide whether technical text needs a monospace face, and mark display styles that should remain limited to headings. Test the chosen set against real navigation labels, long paragraphs, numbers, and buttons before committing.

Keep factual checks separate from visual observations. Licensing, language support, loading behavior, and fallback behavior need their own verification. The page inspection tells you what appears on the screen, while the redesign plan decides what is practical to keep.

## Related questions

- [Compare Fonts That Look Alike in a Browser](/share/compare-fonts-that-look-alike-in-browser)
- [Check heading and body fonts from a URL](/share/check-heading-and-body-fonts-from-a-url)
- [Compare Heading and Body Fonts on a Webpage](/share/compare-heading-and-body-type-on-a-webpage)
- [Website Typography Analyzer With Font Sizes](/share/website-typography-analyzer-with-font-sizes)