Icon font replaces ordinary characters: what to check

Letters, numbers, or punctuation have turned into little pictures, symbols, or unreadable shapes. This often happens when an icon font is applied to ordinary text, or when an icon font and the code that uses it do not match.

Start by checking which fonts are available and how they render sample text. The Installed Fonts tool can help you compare fonts on your computer, but it cannot tell you which font a website or app has actually applied.

Check which font is being used

1. Open the Installed Fonts tool in Chrome or Edge on a computer. It lists installed fonts and lets you preview your own text. Other browsers may show a reduced version of the tool or none.
2. Enter a short sample with letters, numbers, and punctuation, such as Abc 123!?&. If you know the suspected icon font, compare its preview with a regular text font. You can also see how to see which fonts are installed on your PC.
3. Check the font where the problem happens. In a document or design app, select the affected text and look at the font name in the app. On a website, inspect the affected text and check its computed font-family in the browser's developer tools.
4. Temporarily choose a familiar text font for the affected text, or use a regular font stack in a test page. If the characters look normal, the font selection or a style rule is likely responsible.
5. Check whether the problem affects every app or just one website, document, or browser. That difference helps narrow down whether the cause is a system font, an app setting, or a website's font and styles.

Installed Fonts previews fonts installed on your computer. A website may instead download its own font file, so the tool cannot confirm whether that web font loaded correctly or whether the page selected it.

What the result means

Most or all text becomes icons

The icon font may be applied to a whole paragraph, page, or interface instead of just the icons. On a website, check whether a broad style rule assigns the icon font to body, a text container, or every element. In an app or document, check whether the selected text or style uses the icon font.

Only a few characters turn into icons

The font may contain pictures at the same character codes as those letters or punctuation. Some icon fonts use private-use codes, which are character positions reserved for custom symbols. If the font file and the code that selects its icons do not match, an ordinary character can display as an icon. Check that the font version matches the icon set or app using it.

Characters show as boxes or blank spaces

The active font may not contain those characters, or the intended font may not be available to the app. Try a regular font that supports the language and symbols you need. If this happens only on a website, the page may not have loaded its web font, or it may be using a different font than expected.

The problem appears in only one app or browser

The computer's fonts may be fine. Look for an app-specific font choice, a website style rule, a cached old font file, or an extension that changes page appearance. Compare the same text in another app or browser before changing system fonts.

How to fix it

1. Set the affected text to a regular font. Select the problem text and choose a normal text font in the app. If you are building a page, set the text container to a text font instead of the icon font. If this restores the characters, you have confirmed that the wrong font was applied.
2. Apply the icon font only to icons. Keep it on dedicated icon elements, not on paragraphs or the whole page. For example, use a rule like .icon { font-family: 'App Icons'; } for icon elements, and a separate text font for ordinary content. Check for broad rules such as * { font-family: ... } that may override more specific choices.
3. Check the exact font family and file. The family name in the style or app must match the intended font. If the app uses a downloaded font, make sure its font file is the correct version and that the code points used for the icons match that version. Replacing only the font file or only the code can leave icons mapped to the wrong characters.
4. Reload or reopen the affected item. A website can keep an older font file in its cache. Reload the page, then try a private window or another browser to compare. For a document or app, close and reopen it after changing the font.
5. Check for a missing, disabled, or duplicate installed font. In Windows 11, open Settings › Personalization › Fonts to review installed fonts. On macOS, open Font Book and check whether the font is disabled or has a duplicate. Avoid deleting a system font unless you know it is safe to remove.
6. Test the source file on another device. If the same website or document shows the same wrong characters elsewhere, the issue is probably in its styling, font file, or icon mapping. If the problem stays on one computer, check that computer's installed fonts and app configuration.

Why icon fonts can affect ordinary text

An icon font is still a font, so an app can apply it to any text, not just symbols. Many icon fonts are designed around a small set of custom character codes. A website or app then uses those codes to request particular pictures. If the font is applied to regular text, or the mapping and font file are out of sync, letters can turn into icons even though the text itself has not changed.

Use Installed Fonts to compare local font previews, then check the font selection in the app or page where the problem occurs. The preview is a useful clue, but the actual font rule or document setting is what you need to correct.