Missing accented characters in a mobile app mockup

Your app mockup looks fine on your computer, but accented letters turn into empty boxes, disappear, or look different on a phone. This often happens because the font used in the mockup does not include those characters, or because the phone is using a different font.

Test the exact characters in the font on your computer first. The Installed Fonts tool can preview your own text in fonts installed on that computer, helping you separate a font problem from a problem with the text itself.

Check the characters in your font

1. Open the Installed Fonts tool in Chrome or Edge on a computer. It has reduced or no support in other browsers, and it does not inspect fonts on a phone.
2. Copy a sample that matches the characters missing from your mockup, such as á é í ó ú ñ ü ç å ø æ. Include uppercase and lowercase letters if both appear in the design.
3. Preview the sample in the font family and weight used by the mockup. Compare it with other installed fonts to see whether a different font displays every character.
4. Open the mockup and check the same sample there. If it works on your computer, also view the prototype on the target phone or a simulator before changing the design.

Keep the sample identical in each check. A character can look different because of its font, but a changed or garbled character in the actual text needs a different fix.

What the result means

A box, blank space, or replacement symbol appears in the font preview

The font probably does not contain that character in the selected style. A font can support basic English letters but omit accented characters, or include them in regular weight but not in a separate bold font file. Choose another family or style that previews the full sample.

The font preview is correct, but the mockup is not

The mockup may be using a different family, weight, or fallback font than you expect. A fallback is a substitute font selected when the requested one cannot show a character. Check the text layer's font settings and confirm that the same font is applied to the accented letters, not just the rest of the line.

The characters look wrong even in the sample text

Check that the text was copied correctly. If letters appear as unrelated symbols, question marks, or scrambled characters rather than as a different typeface, the text may have been damaged or decoded incorrectly before it reached the mockup. Re-enter or paste the original text from a trusted source, then preview it again.

The mockup works on a computer but not on the phone

The phone may not have that font, or the mockup may not include the custom font file. The phone then substitutes a system font, which might not contain the same characters or have the same appearance. Check the mockup in the actual target environment, not only in the desktop editor.

How to fix missing accented characters

1. Confirm the text is correct. Copy the affected word from the original source and compare it with the text in the mockup. If the characters are already wrong in the source, replace them there; selecting a new font will not repair corrupted text.
2. Choose a font that previews the full sample. Use the same sample in the Installed Fonts tool and choose a family and weight that display all the characters you need. Check italics and bold separately if the mockup uses them.
3. Check that the font is installed and enabled. On Windows 11, open Settings › Personalization › Fonts and look for the font. On macOS, open Font Book and check that the font is installed and not disabled. Restart the design app after installing or enabling a font so it can refresh its font list.
4. Include custom fonts in the prototype or app. If you use a font file that is not part of the phone's normal system fonts, make sure the app or prototype includes and uses that file. Check that the correct regular, bold, and italic files are included. Confirm the font's license allows embedding or distribution.
5. Check the text encoding if characters are scrambled. Ask whoever prepared the content or imported it to preserve Unicode text, the standard format used for characters from many languages. Re-enter a short affected phrase and compare it with the original. If only the font shape changes, investigate font coverage instead of encoding.
6. Retest on the target phone. Reopen the prototype on the device or simulator where it will be reviewed. Check every affected language and style. If the computer preview is correct but the phone still substitutes characters, inspect the phone version's font settings or asset configuration.

Why the phone can look different

A desktop font list only tells you what is available on that computer. It does not confirm that the same font is installed on an iPhone or Android device, or that the app includes it. Mobile systems can use different default fonts and may choose a substitute when a custom font is missing or lacks a particular glyph, the shape used to display a character.

Use the computer preview to narrow down the font choice, then verify the actual prototype on the target phone. The Installed Fonts tool checks fonts on a computer in supported browsers; it cannot inspect the phone's font library or confirm which font the app is using.