Blog

Check UI fonts for a product catalog

Check whether the fonts named in your product catalog are installed, preview sample text, and fix missing families before reviewing the layout.

Emily ParkerTools and utilities 5 min read

A product catalog can look right on your computer and change on someone else's if a font is missing. Text may wrap differently, prices can shift, and headings may use a substitute typeface. Check the fonts on the computer where you are reviewing the catalog before you approve the layout.

The Installed Fonts tool lists fonts available to your browser and lets you preview your own text. It works in Chrome and Edge on a computer. Other browsers may show a reduced version or no font list.

Check the fonts used in your catalog

  1. Open Installed Fonts in Chrome or Edge on the computer you use to review the catalog. If the browser asks for permission to access local fonts, allow it for the check.
  2. Find the font family names specified in your catalog design or style guide. Check each family separately, including fonts used for product names, prices, labels, and headings.
  3. Use the tool's preview to enter sample catalog text. Include a long product name, numbers, punctuation, and any accented or special characters that appear in the catalog.
  4. Compare the preview with the intended typeface and check whether the font list includes the styles you need, such as regular, bold, or italic.
  5. Repeat the check on each computer that will edit or review the catalog. A font installed on your computer is not automatically installed on a colleague's computer.

Use text that resembles the actual catalog rather than a generic alphabet sample. A typeface can have the right overall look but still lack a character used in a product name or price. A family name may also appear under a slightly different spelling than the name in a design brief, so compare the listed name and the sample shapes.

What the result means

The exact font family is listed

The browser can see a font with that family name on this computer. That is a useful check for locally installed fonts, but it does not prove that every app will use it. A catalog application may use a different font setting, load a web font, or substitute a font when a particular style is missing. Confirm the appearance in the application or browser where you will review the finished catalog.

The family is not listed

The font is not available to this browser through the local font list. The catalog may fall back to another typeface, which can change letter widths and line breaks. Check that you have the correct family name, then install the font if your license and workplace rules allow it.

The family appears, but the style is missing

A family can include separate font files for regular, bold, italic, or other weights. If the design calls for a specific style that is not installed, an app may create a synthetic bold or italic, or use a different face. That can make product labels look uneven even though the family name is present.

The preview looks different from the catalog

The preview confirms how the browser displays sample text with the available font, not how every catalog app will render or export it. Check the font assignment in the catalog itself. Also inspect a saved PDF or image export, since the export may substitute or embed fonts differently from the editing view.

How to fix missing or inconsistent fonts

  1. Confirm the font name. Compare the family name in your design file or style guide with the name shown in the font list. A font's file name and its family name can differ.
  2. Install the licensed font. On Windows 11, open Settings › Personalization › Fonts to review installed fonts, or install a font file using Windows. On macOS, open Font Book to review fonts, or open a font file and choose Install Font. Only install fonts you are permitted to use.
  3. Check whether the font is disabled. In Font Book on macOS, select the family and check its status. On Windows 11, look for the family under Settings › Personalization › Fonts. If it is missing there, reinstall the correct font file rather than relying on a copy in a design folder.
  4. Restart the catalog app and browser. Close and reopen the program after installing a font. Some apps only refresh their font list when they start.
  5. Check each style and character. Install the required weights or language-specific font files, then preview the exact product names and symbols again. Do not assume that a regular font file contains every bold or italic style.
  6. Compare on the target computer. Repeat the test on the computer that will produce or approve the catalog. If your team cannot install the font there, ask the catalog owner about an approved substitute or a workflow that preserves the intended appearance.

Local fonts and catalog sharing

A locally installed font is available on that computer, not automatically for everyone who opens the catalog. If another person does not have the font, their app may use a substitute. For a web catalog, the site may load a web font instead, so a local-font check alone cannot confirm what visitors will see.

Before sharing a design file, check your font license and the recipient's workflow. Some applications can embed fonts in a PDF or package font files with a project, but permission to use a font does not always include permission to redistribute it. Review the exported catalog on a second computer if you need to confirm that the layout travels as intended.

The Installed Fonts check runs in a browser, and access to the font list depends on browser support and permission. Use Chrome or Edge on a computer for the fullest check.