Compare font family weights for a design system audit

Your design system calls for regular, medium, semibold, and bold, but the page looks as if some weights are missing or too similar. Before changing the typography rules, check which font styles are actually available on the computer and compare them using the same sample text.

The Installed Fonts tool previews fonts available to your computer with text you choose. Use it to compare candidate families and styles, then check the actual design system separately to confirm its font files and weight settings are being applied.

Compare the font family weights

1. Open the Installed Fonts tool in Chrome or Edge on a computer. Other browsers may show a reduced version or may not support the font list. If the browser asks for permission to access installed fonts, allow it for this check.
2. Choose a short sample that resembles your interface. Include lowercase and uppercase letters, numbers, punctuation, and a few words that appear in your design system, such as Settings, Submit, and 2026. Use the same sample as you compare families.
3. Find the font family you want to audit and inspect the available previews. Compare the regular, medium, semibold, and bold styles when they appear as separate entries. Note any style that is missing, looks unusually similar to another, or changes the shape of important letters.
4. Record the family name and the styles you can see. If you are auditing more than one computer, repeat the check on each one using the same browser and sample. Then compare these local previews with the design system as it appears in your actual product or prototype.

Keep the sample modest. A long paragraph makes small differences hard to compare, while a single letter may hide problems with numerals or punctuation. For a closer look at a single sentence, see how to compare font weights in a sample sentence.

What the previews can tell you

The family has distinct regular, medium, and bold styles

The computer can access separate font styles with those names. Compare their character shapes and visual darkness, not just their labels. Two weights may both be available but look nearly identical at the size used in your interface.

A weight appears to be missing

The installed-font list does not show an available style under the family you expected. That does not prove the design system cannot use it: a website may load its own font files, while a prototype may use a different family or a synthetic bold style. Check the actual page or design file before deciding the style is absent everywhere.

A family has several entries that look alike

The font may have alternate internal names, or the styles may differ only slightly. Compare distinctive details such as the shape of the lowercase a, the width of numerals, and the thickness of small text. Keep the family and style names from the tool in your audit notes so another person can repeat the check.

The preview looks right, but your product does not

The local font is available, but the product may be loading another font, using a different weight value, or falling back to a substitute. The Installed Fonts tool previews local fonts; it does not verify a site's font files, CSS rules, or the font used by a specific application.

How to fix missing or inconsistent weights

1. Refresh the font list. If you just installed a font, reload the tool and check again. If the font still does not appear, close and reopen the browser, then retry.
2. Check font access in the browser. If the browser denied access, use the site information icon beside the address bar to review permissions, allow access to local fonts if that option is shown, and reload. The wording and availability of this permission vary by browser.
3. Confirm that the font is installed. On Windows 11, check Settings › Personalization › Fonts. On macOS, open Font Book and search for the family. If a style is missing, install the correct font files from the source approved for your organization, then reopen the browser.
4. Check the font used by the product. In the design file or site styles, confirm the family name and weight assigned to each text style. If a website uses hosted font files, verify that its regular and heavier files are included and load successfully. A local preview alone cannot confirm this.
5. Use consistent weight assignments. Map the design system's labels to explicit values, such as regular at 400, medium at 500, semibold at 600, and bold at 700, only if those styles are available in the chosen family. Avoid assigning a label to a weight the font does not provide.

Why weight names and numbers do not always match

Font names such as medium or semibold are labels, not a guarantee that two families will have the same visual thickness. In web styles, weight values commonly run from 100 to 900, but a font may include only some of those weights. Variable fonts can cover a range between values, while static fonts usually contain separate files for selected styles.

If a requested weight is unavailable, a browser or design application may substitute another style or make a regular face appear heavier. The result can look different from a true bold or semibold font. For an audit, record both the intended weight and what you actually see in the product. Use the local previews to compare candidate families, then verify the final typography in the interface where it will be used.

Installed Fonts works on your computer in the browser, so it can help you inspect local typefaces without installing an extra font-preview app.