# How to Identify the Fonts Used on a Website

[Open the live Fudge conversation](https://design.withfudge.com/share/identify-fonts-used-on-a-website-from-its-url)

Last updated: 2026-08-25

You can identify the fonts used on a website by checking its rendered typography, font files, variants, and the roles each family performs across the page. The most reliable result comes from comparing visible letterforms with the page's available typography details instead of guessing from the brand or screenshot alone.

## A practical four-step method

1. **Inspect several text roles.** Check the main heading, paragraphs, navigation, buttons, captions, labels, and any code-like or data text. A website may use multiple families, and one sample can miss a supporting face.
2. **Record each family and role.** Note whether a family is used for interface text, display headings, editorial copy, monospace labels, or supporting details. Record the observed weight, size, line height, casing, and letter spacing where available.
3. **Check files and variants.** Look for the exact family name and available regular, medium, semibold, bold, italic, condensed, display, or monospace variants. A variable font may provide several weights through one file.
4. **Compare the result with the page.** Confirm that the name fits the rendered letterforms. Compare distinctive details such as the lowercase `a`, numeral shapes, punctuation, x-height, width, and spacing in large headings.

The captured Linear reference is a useful example of role-based identification. It lists Inter Variable, Berkeley Mono, and Tiempos Headline, while the accompanying notes distinguish the primary sans serif from supporting monospace and editorial display choices. Treat those observations as evidence about that captured page, not as a recipe for every website.

## 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.

## What to record for every font

| Font | Visible role | Evidence to check |
| --- | --- | --- |
| Primary interface family | Navigation, controls, body copy | Repeated use in buttons, labels, and paragraphs |
| Display or editorial family | Large headlines or feature sections | Different proportions, contrast, or serif details |
| Monospace family | Code, metadata, technical labels | Equal-width characters and distinctive numerals |
| Alternate variant | Emphasis or responsive state | Weight, width, italic, or size changes |

Do not treat every weight as a separate family. A semibold heading may use the same family as body text, and a variable font may provide many weights from one file. Conversely, a display face may appear in only one section, so inspect more than the navigation.

## Confirmed fonts versus visual alternatives

Use clear confidence labels:

- **Confirmed:** the page exposes a matching family or font file and the rendered letterforms agree.
- **Strong match:** the family appears consistently and its shapes fit, but the exact file or variant is not verified.
- **Visual alternative:** a similar family reproduces the appearance but is not evidence of what the website loads.

This distinction matters when recreating a design. Keep the observed family separate from any replacement you choose for practical or licensing reasons. Never present a visual substitute as the site's confirmed font.

Before finishing, check one heading, paragraph, button, and small label; record exact family and variant names; compare numerals and punctuation; and mark uncertain results clearly. For several pages, use the same sample roles so the comparison is based on evidence rather than memory.

## Use this in your AI agent

> Identify the fonts used on this website from its URL. Check headings, body copy, controls, labels, code-like text, font files, variants, weights, sizes, and line heights. Return a table with each family, its observed role, supporting evidence, and a confidence label. Separate confirmed fonts from visual alternatives and flag results that need manual verification.

[Use Fudge with your AI agent](/mcp) to run this workflow against captured website references.

---

Check the exact family name and the files available to the page. A variable font may appear with a name such as "Inter Variable" and provide a continuous weight range instead of separate regular, medium, and bold files. The page can still request familiar CSS weights such as 400, 500, or 700.

Compare several weights in the same role. If the letterforms stay consistent while the stroke thickness changes smoothly, that supports a variable-font interpretation. Also check whether italic, width, or optical-size variants are available separately.

Record what is verified: the family name, file or variant information, and the weights used. If you only have a visual match, label it as a strong match or visual alternative rather than a confirmed variable font.

---

Turn the finding into a small typography reference. Record the family, role, weight, approximate size, line height, letter spacing, and the elements where it appears. Include short samples for headings, body copy, buttons, and any monospace or editorial text.

Then decide whether you need accuracy or inspiration. For an accurate recreation, verify the family and variant and check that you are permitted to use them. For inspiration, compare proportions, x-height, width, serif structure, and weight range before selecting an alternative.

Test the choice in context. A font that looks close in a heading may be too wide for navigation or too dense for body text. Keep the original observation separate from the design decision you make afterward.

## Related questions

- [How to Inspect Font Pairings on Websites](/share/inspect-font-pairings-used-on-real-websites)
- [How to Identify Fonts on a Live Website](/share/identify-fonts-on-any-live-website)
- [Inspect a Website's Typography Hierarchy from a URL](/share/inspect-website-typography-hierarchy-from-a-url)
- [Find Visually Similar Fonts With Website Examples](/share/find-visually-similar-fonts-with-website-examples)