Check fonts on a work laptop for a design system audit
Check which design system fonts are installed on a work laptop, compare sample text and glyphs, and spot missing families before documenting an audit.
You have a design system’s font list, but you are not sure which typefaces are actually available on your work laptop. A missing font can make a mockup or document look different from the approved design, while a similar-looking substitute can hide the problem.
Use the Installed Fonts tool to check the fonts your browser can see and preview a sample of your own text. Then compare the results with the design system and check any unclear cases in the design application you use.
Check the installed fonts
- On a computer, open the Installed Fonts tool in Chrome or Edge. Installed font access works in these browsers. Other browsers may show a reduced list or no list.
- Review the font names shown. Compare them with the exact family names in your design system, including punctuation and spaces.
- Enter a short, nonconfidential sample in the tool’s preview text area. Include letters, numbers, punctuation, and any accented characters your product uses, such as
Aa Gg 0O 1l $ & é ñ. - Look through the previews for the families you need. Note the visible family names and any style labels shown, along with anything that looks missing or different.
Use real interface copy when possible, but avoid pasting customer information, unreleased product text, or other confidential material. A short sample is enough to reveal many differences in letter shapes and character coverage.
What the result means
The expected family appears and the sample looks right
The browser can see that font family on this laptop, and the sample renders in its preview. This is a useful first check, not proof that every design application is using the font. Open the same project in your normal design app and confirm its text uses the intended family and style.
The family is not in the list
The browser cannot see that font on this computer. It may not be installed, or your browser may not have access to the installed font list. Check the operating system’s font manager and try the test in current Chrome or Edge before concluding that the font is absent.
The family appears, but some text looks wrong
The font may not include those characters, or the browser may be displaying a fallback for unsupported glyphs. A glyph is the visible shape for a character. Try a different sample and compare the same characters in the design application. For a broader check of an installed font, see how to check if a font installed correctly.
A family appears, but a weight or style does not match
A family name alone does not confirm that the required regular, medium, bold, or italic file is installed or selected. Check the style in your design app. If bold or italic looks noticeably different from the system specimen, follow these checks for missing bold or italic styles.
You see similar names or more than one version
Similar entries can come from separate font families, versions, or naming conventions. Do not remove a font based on its name alone. Compare the exact family and style names with your organization’s approved font package or design-system documentation, then ask your IT or brand team if the entries remain ambiguous.
How to resolve a missing or mismatched font
- Check the browser first. Run the test in Chrome or Edge on the laptop itself. If a browser asks for permission to access installed fonts, allow it only if that action is permitted by your organization. A restricted browser or work profile may limit what the page can list.
- Confirm the operating system can see the font. On Windows 11, open Settings › Personalization › Fonts and search for the family. On macOS, open Applications › Font Book and search for it there. Check the family name and styles against the approved specification.
- Restart the design application. If the font was installed while the app was open, close and reopen the app so it can refresh its font list. Reopen the project and check the text style again.
- Check for a substitute in the project. Select the affected text and inspect its font family and style in the application. A project may have been opened on another computer without the original font, causing the app to use a replacement.
- Ask your IT or design-system owner before installing anything. On a managed laptop, installation may require approval or administrator access. Use the organization’s approved font files and instructions, and verify that the font is licensed for your use. Avoid downloading a lookalike from an unknown source.
What a browser font check cannot verify
The tool reports fonts the browser can access on the device. It does not inspect your design files, confirm a font’s license, identify every font version, or prove that another app will use the same font. Application settings, document-level substitutions, and missing font styles can all affect the final result.
For an audit, record the laptop and browser tested, the date, the font family and style names shown, and any characters that rendered incorrectly. Then verify the important families inside the design app used by your team. That separates a browser access issue from a missing font or a project-specific substitution.
