How to Find Font Weight on Any Website
Font weight determines how thick or thin text characters appear, and it's essential for reproducing a design accurately. Getting the exact weight value — not just 'bold' or 'normal' — helps you match typography precisely. Here's how to find it.
Use Font Finder for Instant Weight Detection
Font Finder shows the computed font weight as a numeric value when you hover over any text element. This gives you the exact weight the browser is rendering, such as 400, 500, 600, or 700. Because Font Finder reads the computed CSS, it resolves keywords like 'bold' or 'bolder' into their actual numeric equivalents, so you always get a precise value. This is faster than opening DevTools and eliminates guesswork about which weight the browser ultimately chose from the available font files.
Inspect Font Weight with DevTools
Right-click the text and select 'Inspect'. In the Styles panel, look for the font-weight property — it may be set directly on the element or inherited from a parent. Switch to the Computed tab and search for 'font-weight' to see the final resolved value. The Computed tab is important because CSS specificity and inheritance can make it hard to determine the effective weight from the Styles panel alone. If the element uses a shorthand 'font' property, the weight will be embedded within it and the Computed tab breaks it out individually.
Understanding Font-Weight Values (100–900)
CSS font weights use a numeric scale from 100 (thinnest) to 900 (heaviest), in increments of 100. The most commonly used values are 400 (normal/regular), 500 (medium), 600 (semi-bold), and 700 (bold). Not every font supports all nine weights — many fonts only include a few. If you set a weight that isn't available, the browser applies a fallback algorithm: for weights 400–500 it tries nearby values first, while for weights below 400 or above 500 it looks in the lighter or bolder direction respectively. Understanding this scale helps you specify accurate weights when recreating a design.
Named Weights vs Numeric Values
CSS supports two named weight keywords: 'normal' (equivalent to 400) and 'bold' (equivalent to 700). There are also relative keywords — 'bolder' and 'lighter' — which adjust the weight relative to the parent element's computed weight. In practice, most professional stylesheets use numeric values for precision, since font families often include weights like 300 (light), 500 (medium), or 600 (semi-bold) that have no keyword equivalent. When you see a computed weight of 400 or 700 in Font Finder or DevTools, it might have been declared as 'normal' or 'bold' in the original CSS, but the numeric value is what matters for reproduction.
Variable Font Weight Ranges
Variable fonts are a newer font technology that can contain an entire range of weights in a single file instead of requiring separate files for each weight. A variable font might support any weight from 100 to 900 continuously — including non-standard values like 350 or 550. You can identify variable fonts in DevTools by looking for @font-face rules with a font-weight range (e.g., font-weight: 100 900) or by checking the Network tab for a single font file that covers multiple weights. When inspecting text using a variable font, the computed weight might be any number within the range, not just the traditional multiples of 100. Font Finder will display the exact numeric value regardless of whether the font is variable or static.
Try Font Finder Now
The fastest way to identify fonts on any website. Install the free Chrome extension and start inspecting typography in one click.