Check local fonts for symbols in a website redesign

A symbol looks right in your design file, but appears as a blank box or a different character on the website. The font may not include that symbol, or the page may be using a different font than you expect.

Before launch, check the fonts installed on your computer and compare how they render the exact symbols your design uses. The Installed Fonts tool previews your own text in local fonts, so you can spot likely gaps without installing anything.

Check the symbols in your fonts

1. Open the Installed Fonts tool in Chrome or Edge on a computer. Font access is limited or unavailable in some other browsers. If your browser asks for permission to inspect installed fonts, allow it for the tool.
2. Make a short test string containing the exact characters used in the redesign. Include common symbols such as ©, ®, €, arrows, bullets, mathematical signs, and any language-specific characters in your interface.
3. Preview the string in each font you are considering. Look for a missing character, a box, an unexpected emoji, or a symbol whose weight or shape clashes with the surrounding text.
4. Compare the promising fonts with the actual page design. Check the same text at the sizes and weights used in headings, buttons, labels, and body copy.

Test the actual characters, not just a list of names such as “arrows” or “currency.” Two similar-looking symbols can be different characters, and a font may contain one but not the other.

What the result means

Every character appears as intended

The font has a usable glyph, which is the font's drawing for a character, for the symbols you tested. This is a good local check, but it does not prove that website visitors have the font installed or that your web font file contains the same glyphs.

A character appears as a box or blank space

The font may not have a glyph for that character, or the browser may not be able to access the font. Try another candidate font. If the issue happens only on the website, inspect the font file and page styling too.

The symbol appears, but looks different

The font supports the character, but its design may not fit your page. Check details such as stroke weight, alignment, spacing, and whether it looks like a text symbol or a colorful emoji. Choose a font that matches the visual style, not just one that displays something.

The local preview looks right, but the website does not

The website may be using another font, failing to load its web font, or loading a font file that lacks the symbol. A local font preview cannot inspect your website's CSS or confirm which font file a visitor receives. Check the live page in the target browsers and operating systems.

How to fix missing or inconsistent symbols

1. Confirm the character. Copy the symbol from the page content or design specification into your test string. Similar marks can use different Unicode characters, so verify the exact one rather than substituting a lookalike.
2. Check the intended font on your computer. On Windows 11, open Settings › Personalization › Fonts and look for the font family. On macOS, open Applications › Font Book and search for the family. If it is missing, install it from a source you are licensed to use, then reopen the browser or reload the page.
3. Check the font used by the page. Review the site's CSS and confirm the intended family and weight are applied to the element. A bold style may use a separate font file, and a web font may load correctly for letters but omit less common symbols.
4. Provide a fallback font. Use a CSS font stack that includes suitable alternatives after the primary family. For example: font-family: "Brand Sans", Arial, sans-serif;. Test the actual symbol string with the fallback fonts, since their symbol shapes may differ.
5. Check the live page on more than one system. Test Chrome and Edge on a computer, then check the browsers and devices your visitors are likely to use. A font installed on your computer is not automatically available to everyone. If the design depends on a particular font, serve a properly licensed web font and include a fallback.

Choose a reliable symbol treatment

For a small set of important interface symbols, consider using SVG or an icon font supplied with the site instead of relying on whatever local fonts visitors happen to have. This gives you more control over appearance, but icons still need to be tested for size, contrast, and accessibility. Pair an icon with a text label when its meaning needs to be clear.

For ordinary text characters, use a web font with the required glyph coverage and a fallback stack. Be especially careful with less common currency signs, mathematical notation, arrows, and accented characters. If a font download is split into subsets, confirm the subset containing those characters is included in the page.

Use the local font preview to narrow your choices, then verify the final page in its real browser and device combinations. Nothing in a local preview guarantees that every visitor will see the same font or glyph.