Check a specific font family for a landing page mockup

Your landing page mockup looks right on your computer, but will the headline use the same font on someone else’s device? First check whether the font family is installed locally, then preview your actual text in the styles you plan to use.

The Installed Fonts tool lists fonts the browser can access on your computer and lets you preview your own text. This is useful for checking a specific family before you send a mockup for review or build a page around it.

Check the font family

1. Open Installed Fonts in Chrome or Edge on a computer. The tool may ask for permission to access installed fonts. Allow access if you want it to check your local font list.
2. Find the family you want to use in the list. Check the name carefully, especially if your design file uses a family name that differs slightly from the font’s displayed name.
3. Preview a real piece of the mockup text, such as the headline, a button label, or a short paragraph. Use the text you expect to appear on the page, rather than judging by the font’s sample letters alone.
4. Look for the styles you need, such as regular, bold, or italic. Compare the result with the mockup, including the width of the headline and the shape of important letters.

If you do not see the family, try the full name as it appears in your design file, then check whether it is installed on this computer. A font shown in a cloud library or in a design application is not necessarily installed locally for the browser to inspect.

What the result means

The family appears and the preview matches

The browser can access a local copy of the font family, and its preview is suitable for an initial mockup check. Compare the specific weight and style used in your design, because the regular style can look quite different from a bold headline.

This does not guarantee that the live page will use the same font for every visitor. A website may load a separate web font, or the visitor’s device may not have the local font installed. If consistent display matters, make sure the site has an appropriate web font setup and a fallback font.

The family appears, but the text looks different

You may be previewing a different style or weight than the mockup uses. A bold face, for example, can take up more space than regular. Check the exact family and style name in your design, and compare the same wording at the same text size.

Also look for letter substitutions or uneven spacing. If the font does not include a character used in your headline, the browser may show that character in a fallback font, which can make part of the text look inconsistent.

The family does not appear

The font may not be installed, or the browser may not have permission to inspect local fonts. The tool cannot list fonts that exist only in a cloud account, inside another application, or on a different computer.

The tool cannot access installed fonts

Installed font access is supported in Chrome and Edge on a computer. Other browsers may show a reduced list or no list. Try Chrome or Edge on the same computer, and respond to the browser’s font access request if it appears.

How to fix it

1. Check the family name and style. Compare the spelling in your mockup with the name shown by Installed Fonts. Some fonts have a family name, a style name, and a separate file name, and these can look different.
2. Allow local font access. If the browser asks to access fonts on your device, choose the option to allow it. If you dismissed the prompt, use the site information or permissions control beside the address bar to review the site’s access. The wording and location can vary between browser versions.
3. Install the font if it is missing. Use a font file from a source you trust and make sure your license allows the intended use. On Windows 11, open Settings › Personalization › Fonts to review installed fonts, or install a font file through File Explorer. On macOS, open the font file in Font Book and use the install option there.
4. Reload the tool after installing. Close and reopen the page, or refresh it, so the browser can check the updated font list. If it still does not appear, close and reopen the browser before checking again.
5. Check the mockup’s font settings. A design may use a similar-looking substitute, a different weight, or a font loaded by the design application. Confirm the exact family and style in the source file before changing the page layout.

Keep the mockup consistent for other people

A local font check tells you what is available to the browser on the computer you are using. It does not install that font for your reviewers, and it does not confirm that a published page has downloaded the right web font. If a reviewer sees different text wrapping, ask which font their browser is using and compare the same headline on both systems.

For a handoff, note the font family and the styles used for headings and body text. If the font is licensed only for desktop use, check its license before embedding it in a website. A fallback family can keep the page readable when the preferred font is unavailable, but line breaks and spacing may change.

Installed Fonts checks local font availability in the browser, it does not upload your mockup text or install fonts for you.