# Find Every Font Weight Used on a Website [Open the live Fudge conversation](https://design.withfudge.com/share/find-every-font-weight-used-on-a-website) Last updated: 2026-08-25 To find every font weight used on a website, check the page's loaded font files, inspect the text styles that use them, and record each weight by family and role. The useful result is not just a list such as 400, 500, and 700, but a map showing which weights appear in headings, navigation, body copy, buttons, labels, and other components. ## Use a repeatable font-weight check Start by reviewing the website at several representative page states rather than inspecting only the homepage. Include the main landing page, a content-heavy page, a form or dashboard, and any menus or dialogs that open after interaction. Different parts of a site may load different font files or use a heavier label style that is not visible in the first screen. For each font family, record the numeric weight exactly as declared or loaded. Common values include 300, 400, 500, 600, and 700, but variable fonts may expose a range instead of separate files. Treat a variable family as its own finding and note the actual weights used in visible text. Also separate regular, italic, condensed, display, and monospace families so their weights are not mixed together. ## 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. ## Build a useful weight inventory A simple inventory can use these columns: font family, weight, style, text role, page or component, and evidence. For example, you might record Inter Variable at 400 for body copy, Inter Variable at 500 for navigation, and Inter Variable at 700 for prominent headings. If the same weight appears in several places, group the roles together instead of creating duplicate entries. Then check whether the declared weights match what the browser actually displays. A stylesheet may request 600 while the site serves a variable font file, or it may request a weight that is missing and fall back to a nearby value. Browser developer tools can show computed `font-family` and `font-weight` values for selected elements. The Network panel can help confirm which font files are loaded, while the rendered page tells you where those weights are visible. Use the inventory to answer three practical questions: Which families carry most of the interface? Which weights are essential to the visual hierarchy? Which weights appear only in special cases? This prevents a long asset list from hiding the small set of choices that actually shapes the page. Open the examples below and compare how one captured site separates its primary sans serif, supporting monospace, and editorial display face. The same comparison method works for weights: start with the main family, then trace each heavier or lighter treatment back to a visible role. ## Check the result before copying it Do a second pass at different viewport widths and with interactive states open. Responsive navigation, modal headings, form errors, badges, and hover or selected states can introduce weights that are absent from the default layout. If the website has localized pages, check those too, because longer words and different scripts can expose alternate font files or fallback behavior. Next, look for consistency. If several components appear visually different but use the same numeric weight, the difference may come from font family, size, tracking, line height, or color rather than weight. Conversely, two labels that both report 500 may look different if one uses a variable font axis or a different family. Record the computed value, but keep a visual note for cases where the number alone does not explain the result. Before using the findings in a redesign, reduce them to a working set. Mark each weight as core, supporting, or uncertain. Core weights appear repeatedly and should be preserved first. Supporting weights belong to specific components or content types. Uncertain entries need another check because they may come from fallback text, a browser state, or a font file that was loaded but not visibly used. A final checklist is: inspect multiple pages, open hidden states, identify every family, record numeric and variable ranges, verify loaded files, map weights to roles, check responsive views, and flag fallbacks. That gives you a dependable picture of the site's typography without confusing downloaded assets with fonts that users actually see. ## Use this in your AI agent > Check this website's typography and find every font weight that is visibly used. Group the results by font family, then map each weight to headings, body text, navigation, buttons, labels, forms, and other clear roles. Include variable-font ranges when relevant, distinguish regular and italic styles, note responsive or interactive states that add different weights, and separate confirmed findings from uncertain ones. Return a compact table followed by a short checklist of the core weights to preserve. > > [Install Fudge for your AI agent](/mcp) --- Check the selected element's computed `font-weight`, then confirm the loaded font file or variable-font range in the browser's Network and Fonts panels. A stylesheet declaration alone is not enough because the requested weight may be unavailable, synthesized, or replaced by a fallback. Compare nearby text that should share the same family. If 500 and 600 look identical across several components, the site may be serving one variable font with limited visible distinction, or the browser may be resolving both requests to the same available instance. If 600 looks unusually thin or heavy, inspect whether the family has a real 600 master or whether the browser is synthesizing the appearance. Also check the rendered pixels at normal size. A weight difference can be masked by small text, low contrast, tight tracking, or antialiasing. Use large headings and labels first, then confirm the result in body text. Record the computed value, the loaded family, and your visual confidence separately. That way your inventory can say "declared 600, visually appears close to 500" instead of presenting an uncertain value as a fact. Try this next: [check the site's font weights with Fudge](/mcp) --- Give them a short inventory plus enough context to reproduce each finding. Start with the font family and style, the numeric weight or variable range, and the page or component where it appears. Add a role such as display heading, body copy, navigation, button label, metadata, form label, or code text. A useful table has columns for family, style, weight, role, location, responsive state, and confidence. Mark repeated weights as core, one-off treatments as supporting, and anything affected by fallback or missing files as uncertain. Include a screenshot or direct page reference when the distinction is visual rather than obvious from the number. Finish with a recommendation, not just raw observations. State which weights the project should preserve, which can be consolidated, and which need verification before implementation. For example, a system may rely mainly on 400 and 500, use 700 only for major headings, and reserve a monospace family for code or technical labels. That summary helps the team make a decision without reopening every page. Try this next: [turn the website typography into a practical weight checklist with Fudge](/mcp) ## Related questions - [Find a Website's Font Family and Line Height](/share/find-font-family-and-line-height-from-a-website) - [Find Custom Font Files Used by a Website](/share/find-custom-font-files-used-by-a-website) - [Find Fonts Similar to a Brand Typeface](/share/find-fonts-similar-to-a-brand-typeface) - [Find a Practical Web Font Alternative to a Custom Font](/share/find-a-practical-web-font-alternative-to-a-custom-font)