Review fonts before file handoff for a landing page A/B test

You have two landing page versions to compare, and the font is part of the change. Before you hand off the files, check that the candidate fonts are installed on your computer and that your actual headline, buttons, and body copy look right in each one.

The Installed Fonts tool previews text using fonts available on your computer. Use it to catch missing families and awkward letter shapes, then prepare a handoff that makes the intended font and fallback behavior clear.

Review the fonts before handoff

Open the Installed Fonts tool in Chrome or Edge on a computer. Other browsers may show a reduced version or no font list.
Enter representative text for the landing page, including a headline, a button label, and a sentence with punctuation or numbers. Use the same text for each candidate.
Review the candidate fonts in the previews. Look for readable letterforms, suitable spacing, and line breaks that fit the design.
Record the font family names and the intended styles or weights for each A/B version. Keep the two versions' copy, width, and other layout choices consistent if the font is the only variable you want to test.
Before sending the files, include the exact font files only if the license allows sharing them. Otherwise, provide the approved source or web font details and a fallback stack.

The preview helps you check what is installed locally. It does not prove that a font file is included in a website build, that a visitor's browser can load it, or that the font license permits web use.

What the result means

The candidate appears and the sample text looks right

Your computer can preview a locally available font, so you can assess its appearance before handoff. Note its family name and the particular style you intend to use. The recipient still needs the font file, access to the same installed font, or a web font configured for the page.

The font is missing from the list

The browser cannot see that font as installed on this computer. The design may currently be displaying a substitute, which can change text width and line breaks. Confirm the font family name and install the licensed font file, or arrange for the web version to load it.

The name is present, but the text looks different than expected

A family can include multiple styles, and the page may request a weight or italic style that is not available. Check the specific font files and styles with the person preparing the site. A browser may synthesize a bold or italic appearance when the requested face is missing, so the preview alone does not confirm the website's final rendering.

Both previews look similar

That can be a valid result. Compare distinctive details such as lowercase a and g, numerals, punctuation, and the width of the headline. Keep the exact sample text and layout the same so you are comparing the font choice, not several design changes at once.

Fix a missing font or a mismatched preview

Check the family name and file. Compare the name in the design brief with the font file or the supplier's documentation. Similar family names can refer to different fonts or versions.
Refresh the browser after installing a font. Close and reopen the Installed Fonts tool, or reload the page. If the font was installed while a design app was open, restart that app so it can refresh its font list.
Install the approved font file. On Windows 11, open Settings › Personalization › Fonts to manage fonts, or open a trusted font file and choose the install option. On macOS, open the font in Font Book and use File › Add Fonts to Current User. Follow your organization's rules if this is a managed computer.
Check the requested style and weight. Confirm that the handoff specifies a real available style, such as regular or bold, rather than assuming every family has every weight. Recheck the sample after installing any missing style files.
Specify a fallback. In the handoff, give the intended family first and a sensible generic fallback, for example Inter, Arial, sans-serif. A fallback keeps text visible if the preferred web font fails to load, but it may change wrapping and page height.
Confirm the web font separately. Ask the site owner or developer to verify that the correct licensed font files are included and that both A/B versions request the intended family and weight. A local font preview cannot inspect the site's published files.

Make the A/B handoff easy to reproduce

Include a short note for each version: the font family, style or weight, source file or approved web font location, and fallback stack. Add the sample text you used and identify which page elements use the font. This gives the recipient enough detail to recreate the same typography rather than guessing from a screenshot.

Font choice can affect more than appearance. A wider face may wrap a headline onto another line, move a button, or change how much content appears above the fold. If the goal is to measure the effect of typography, keep the copy and other page settings unchanged, and document any layout change caused by the new font. For help structuring a comparison, see How to compare fonts for a landing page A/B test.

The Installed Fonts tool previews fonts on your computer in the browser. Font files stay on your device, and the preview is not a substitute for checking the published landing page on the browsers and devices your audience uses.