How to check local fonts before a website mockup

You have a website mockup to build, but you are not sure whether the typeface is installed on your computer. A missing font can change line breaks, button widths, and the overall feel of a design.

Use the Installed Fonts tool to check the fonts your computer makes available to the browser and preview your own text. It works in Chrome and Edge on a computer. Other browsers may show fewer fonts or none.

Check whether the font is installed

Open the Installed Fonts tool in Chrome or Edge on your computer.
Look through the font list for the exact family name supplied by the designer or shown in your mockup specifications. A similar name is not necessarily the same font.
Enter or paste a representative line of your website copy in the preview. Include text that matters to the design, such as a heading, a button label, or a line with numbers and punctuation.
Compare the letter shapes, spacing, and line wrapping with the mockup. If you are checking a font with unusual characters, include those characters in your sample too.

Check the exact font family, not only the general style. Two fonts can both look like geometric sans serif fonts, for example, but have different letter widths and shapes.

What the result means

The exact family appears in the list

Your browser can see a locally installed font with that family name on this computer. The preview can help you judge whether its letters look right for your copy. This does not prove the font will be available on another person's computer or on a phone.

A similar font appears, but not the exact one

The similar font is a possible substitute, not confirmation that the requested typeface is installed. A substitute may change line breaks and spacing, even when it looks close at first glance. Ask for the exact family name or a web font file if the design depends on it.

The font does not appear

The font may not be installed, or your browser may not be able to list it. Before concluding that it is missing, check the tool in Chrome or Edge on a computer. The browser-based list is not a complete inventory on every browser and device.

The preview looks different from the mockup

Check that you have the right font family and style. A font family may have separate regular, bold, and italic files, and the mockup may use a weight or style that is not installed. The tool's preview is useful for checking the available family, but it does not guarantee every weight used by the design is present.

How to fix a missing or mismatched font

Confirm the font name. Check the design handoff, style guide, or project files for the exact family name. A filename can differ from the name the font uses when installed, so do not rely on the file name alone.
Check the system font list. In Windows 11, open Settings › Personalization › Fonts and look for the family. On a Mac, open Applications › Font Book and search the font list. If the system also cannot find it, it may not be installed.
Get the correct font file. Ask the designer or your organization for the approved font files, or obtain them from the font provider. Check that you are allowed to use the font in your project. Do not assume a font is free for a commercial website just because it is available to download.
Install the font and check again. Use the operating system's font installer, then reload the tool. If the font still does not appear, close and reopen the browser so it can refresh its view of installed fonts.
Choose a safe fallback if you cannot install it. Ask the designer for an approved substitute, then check your layout using that font. Avoid silently substituting a random typeface if line length or brand appearance matters.

Local fonts are not the same as website fonts

A local font is installed on your computer. It can help you build and preview a mockup, but it may not be available to people who visit the finished site. If a website relies only on a local font, each visitor may see a fallback font when that typeface is absent from their device.

A website can instead load a web font as part of the site. That can provide a consistent typeface across visitors, but you need the right font files and permission to use them. Check the mockup in the same way it will be delivered: a local font check alone cannot confirm that a web font loads correctly.

For a quick local preview, a CSS font stack might look like font-family: "Brand Sans", Arial, sans-serif;. The browser tries the listed options in order. If the exact font is missing, it moves to the next available option, which may change the design's spacing.

Check the font on the computer where you will build the mockup, then verify the finished page on another device before sharing it.