Find a matching font for a mobile app prototype

You have a typeface in mind for a mobile app prototype, but you do not know its name or cannot find it in your design tool. A close match can keep the interface feeling consistent, but even a similar-looking font may change button widths, line breaks, and the overall balance of a screen.

Use the Installed Fonts tool to browse fonts available on your computer and preview them with text from your prototype. Then check the strongest candidates in the actual prototype and on a phone, where font availability can differ.

Find a close match

1. Open the Installed Fonts tool in Chrome or Edge on a computer. Font access is limited in other browsers, so use one of those if the list is empty or incomplete.
2. Choose a short sample of text from the interface and enter it in the font preview. Include the kinds of characters users will see, such as a heading, a button label, numbers, punctuation, and accented letters if your app uses them.
3. Browse the available fonts and compare their previews with the typeface in your prototype. Look at letter shapes, not just the overall style. The shape of lowercase a and g, the width of capitals, and the form of numerals can help narrow down a match.
4. For the closest candidates, compare the same text at the same size and weight in your prototype. Note the font family and style, such as regular, medium, or bold, if shown in the font list.

Use a sample that reflects the screen you are designing. A typeface that looks right in a large heading may be too wide for small navigation labels. For a useful comparison, try a long button label, a short heading, and a line of body text rather than judging from one word alone.

What the result means

The letter shapes look very similar

You may have found the same family or a close substitute. Compare several letters and numbers before deciding. A single character can look similar by coincidence, while a group of distinctive shapes is more helpful.

The style matches, but the text takes up more space

The candidate may have wider letters or different spacing. That difference matters in a mobile layout: a label can wrap, a button can grow, or a heading can take an extra line. Test the candidate at the size and weight used in the prototype, and adjust the layout only after confirming the font itself is correct.

The font appears on your computer but not on the phone

The font is installed locally on the computer, but that does not mean it is available on a mobile device. A prototype may use a system font, a font loaded from a service, or a custom font included with the app. Confirm how the prototype provides the typeface before treating the desktop preview as a phone preview.

You cannot find the exact face

The font may not be installed, may have a different family name, or may be available only inside the design application or prototype. A close visual match is a fallback, not proof that you have identified the original typeface.

How to improve the match

1. Use a more revealing sample. Add distinctive characters such as G, R, a, g, 1, and 0. Include the actual punctuation and accented characters your interface needs.
2. Compare at the same size and weight. A bold face can look quite different from its regular style, and a larger sample can make small shape differences easier to see. Keep the text and viewing scale consistent while comparing.
3. Check that the font is installed. On Windows 11, open Settings › Personalization › Fonts and look for the family. On a Mac, open the Font Book app and search for it. The computer’s font list may show a family name that differs from the filename.
4. Check the prototype’s selected font. In your design or prototyping app, confirm the family and style assigned to the text. If the intended font is missing, the app may substitute another one without making the change obvious.
5. Test the candidate on an actual phone. Open the prototype on the target device and check text wrapping, alignment, and small text. Desktop previews cannot confirm that a custom font is included or loaded on the phone.
6. Choose a practical fallback if needed. If the exact family is unavailable, select a similar font that supports the required characters and has the weights your interface uses. Check its license before including it in an app or sharing it with a team.

Check how the font reaches the phone

A computer’s installed font list describes fonts available to that computer, not a promise that another device can use them. If the prototype uses a custom typeface, the project or app usually needs a supported way to include or load that font. If it relies on a system font, the phone may display a different family from the one shown on your computer.

Ask whoever manages the prototype whether the font is bundled, loaded externally, or replaced by a system font. Then compare the phone preview with the desktop version using the same labels and screen size. If the font changes, check the prototype’s font setup before altering line breaks or reducing text size to compensate.

The Installed Fonts tool shows fonts available on the computer you are using. Use the actual phone preview to confirm the final appearance on your target device.