Find Custom Font Files Used by a Website

To find custom font files used by a website, inspect its loaded typography and record each family, file, variant, weight, and where it appears. The most reliable result is a usage map that connects a font file to visible text, rather than a list of names copied from a stylesheet.

Use this method

1. Open the website in a browser and inspect its typography.
2. List every font family that appears on the page, including fallback stacks and variable fonts.
3. Record the font file format and source path when available, such as WOFF2 or WOFF.
4. Note variant details: regular, italic, condensed, display, variable, or a specific weight range.
5. Match each font to an actual role, such as body text, navigation, headings, code, labels, or promotional copy.
6. Check several sections before deciding that a font is global. A site may use one family for its interface and another for editorial areas.

The useful output is a table with five columns: family, file or source, variant, weight or range, and observed usage. If a file name is hashed or abbreviated, keep the original name and add the family name separately. Do not assume that a file named regular is the only weight in use, especially when the family is variable.

The captured Linear typography reference lists Inter Variable, Berkeley Mono, and Tiempos Headline. Its font usage notes identify Inter Variable as the primary sans serif, Berkeley Mono as a supporting monospace face, and Tiempos Headline as an occasional editorial display face.

What to check in the font files

For each custom file, record the family name, full name, weight, style, stretch, width, variable axes, Unicode ranges, language coverage, file format, and whether the browser loaded it. Separate files that are directly used from files that are only declared, preloaded, or reserved for another page state.

A declared font is not necessarily a used font. The rendered result is the final check. Compare a heading, paragraph, button, navigation label, and code sample because one page may switch families between those roles. Also check responsive states and interactive components such as menus, modals, and forms.

Turn the result into an inventory

Use a compact table like this, replacing the example values with what you observe:

If a font appears in one section only, label it as section-specific. If you cannot confirm a file-to-role match, mark it unverified and keep the browser evidence beside it. Save representative screenshots or text samples with the viewport size so another person can compare wrapping, spacing, and density.

For variable fonts, record actual values when available instead of writing only "variable." Also save the fallback stack and note whether the browser rendered the intended family or substituted another one. This makes the inventory useful for a rebuild rather than just a collection of file URLs.

Use this in your AI agent

> Inspect the captured website typography and create an inventory of every custom font file and font family used. For each one, record the file or source, format, variant, weight or variable range, and the page roles where it appears. Separate confirmed rendered usage from declarations or fallbacks, and finish with a concise table I can use to recreate the typography. Install Fudge for your AI agent

Start with rendered text, not the stylesheet. Choose representative elements such as a heading, paragraph, button, navigation item, and code sample. Inspect the computed font family, weight, style, and line height for each one, then record the family the browser resolves to. The first declared family may fail, allowing a fallback to render instead.

Compare that result with the loaded font files. Treat a file as confirmed only when its family and variant match rendered text and the browser shows that the resource loaded successfully. Keep separate labels for declared, loaded, and visibly used.

Check responsive states and interactive components too. A mobile menu, modal, login screen, or hover state may use a family that does not appear in the initial page view. If you only checked one page, state that scope clearly. For a site-wide inventory, inspect several page types and record each role by location.

Save a small font inventory plus visual evidence. Include the family name, original file or source path, format, style, weight or variable range, and the role where you observed it. Add whether the result is confirmed, likely, or unverified.

Keep a screenshot or text sample for each important role, with the viewport size and enough surrounding text to compare wrapping, spacing, and density later. For variable fonts, record the actual values used when possible rather than writing only "variable."

Finally, note the fallback stack and important differences between sections. A practical handoff might contain rows for interface text, headings, code, labels, and editorial text, followed by a short list of open questions. That is more useful than saving font URLs without context.

Related questions

• Find Every Font Weight Used on a Website
• Find a Practical Web Font Alternative to a Custom Font
• Find a Website's Font Family and Line Height
• Find a Free Alternative to a Website Font