Review fonts before a website redesign handoff

A font that looks right in a mockup may not be installed on the next person’s computer, or may not include the characters your redesigned website needs. Review the type choices before handing off the files, and record the exact fonts, styles, and fallback behavior the developer should use.

You can preview your own text in the Installed Fonts tool, then check the chosen fonts in the actual website files. The preview helps you compare fonts on your computer, but it does not prove that a website visitor or another team member has the same fonts installed.

Review the fonts step by step

Open the font list. Use the Installed Fonts tool in Chrome or Edge on a computer. It shows the fonts available on that computer and lets you preview your own text. Other browsers may show a reduced version or no font list.
Use copy from the redesign. Preview the same heading, navigation label, button text, and body copy in each font you are considering. Comparing identical text makes differences in width, shape, and readability easier to notice.
Include characters that matter. Add uppercase and lowercase letters, numerals, punctuation, and any accented letters or symbols the website needs. A font may look suitable in a short heading but lack a character used in names, prices, or language-specific content.
Check the actual styles. Note whether the design needs regular, bold, italic, or other weights. A family name alone may not tell the developer which styles are required. If a style is missing, the browser may use a nearby font or create a synthetic bold or italic appearance.
Check the font in the design context. Review headings, paragraphs, buttons, and navigation at the sizes and line lengths used in the layout. A type sample is useful for comparison, but it cannot show every effect of the website’s spacing, responsive layout, or browser rendering.
Record the handoff details. List each font family, the required styles or weights, where it is used, and the fallback font stack. Include the licensed web font files or the approved source when applicable, and tell the developer where those assets belong in the project.

Decide whether the font is local or part of the website

A font installed on your computer

A local font can help you compare design options quickly. The Installed Fonts tool is useful for checking how actual website copy looks in fonts available on your computer. However, a local font will not automatically appear for visitors. If the website relies on it, the project needs an appropriate web font or another approved way to provide the font.

A web font included with the project

A web font is loaded by the website, so visitors do not need that font installed on their computers. Confirm that the project includes the correct font files and that the font license allows the intended web use. Check the font in the website itself, since local previews cannot confirm that the files are linked correctly or load successfully.

A system font or fallback

A fallback is the next font the browser uses if the preferred font is unavailable. A CSS font stack might look like system-ui, sans-serif. The fallback should keep text readable and prevent major layout changes if the first-choice font does not load. Ask the developer to test it by temporarily making the preferred font unavailable.

Check the details that affect the handoff

Family names. Record the names used in the design files and confirm which font files or web font entries they correspond to. Similar names can refer to different families or versions.
Weights and styles. Record the actual styles the design uses, such as regular and bold. If the design uses several weights, verify that the project includes them rather than assuming one file covers every style.
Character coverage. Test real text from every language and content type the website supports. Check accented characters, currency signs, and special punctuation where they appear in the design.
Text wrapping. Font width affects line breaks, button sizes, and page length. Check long headings and navigation labels as well as short sample words, especially at narrow screen sizes.
Fallback behavior. Make sure a missing font does not make key text hard to read or cause important labels to wrap unexpectedly. The developer can check this in the browser with the final styles and assets.

Fix common font handoff problems

The font looks different on another computer

The other computer may not have the font installed, or it may have a different version. Do not assume that attaching a design file supplies its fonts. Provide the approved web font assets when the license allows it, or specify an available alternative and test the fallback in the website.

Some letters or symbols look wrong

Check whether the chosen font supports those characters. Preview representative text, including accented letters and symbols, then test the same content in the deployed or local website using its actual font files. If a character is missing, choose a font with the necessary coverage or define a suitable fallback.

Text wraps differently from the mockup

Confirm that the correct family and weight loaded, then compare the font size, line height, letter spacing, and container width with the design. A different fallback font can change text width even when the CSS looks correct.

The browser preview is incomplete

Installed Fonts works best in Chrome and Edge on a computer. If the font list is reduced or unavailable in your browser, use Chrome or Edge on a computer for the local comparison. Still check the finished website in the browsers and devices that matter for the project.

Keep the font list with the project files, not only in a message. That gives the next person a clear record of what to load, what to test, and what fallback to use if a font is unavailable.