Find a local font that matches a dark-mode UI

You have a dark-mode screen in front of you and want to find a typeface that looks similar using fonts already on your computer. The challenge is that several fonts can look alike until you compare the same letters, numbers, and spacing.

Installed Fonts shows local fonts with a preview of text you provide. Use it to narrow down a visual match, then check your leading choices in the actual interface. It works in Chrome and Edge on a computer. Other browsers may show a reduced version or none.

Compare local fonts with your UI

1. Open Installed Fonts in Chrome or Edge on your computer. If the browser asks for permission to access local fonts, allow it if you want to see the fonts installed on this device.
2. Enter a short sample taken from the interface you are matching. Include a heading, a button label, and any distinctive characters or numbers. For example, try Settings 01: OIl, 5.8 ms to compare letter shapes and numerals.
3. Browse the font previews and look for the details that stand out in your UI. Compare the lowercase a and g, the shape of 1 and uppercase I, and the width of common words.
4. Keep a short list of candidates that resemble the interface in both shape and spacing. Use the same sample text for each one so you are comparing like with like.
5. Try your shortlist in the actual interface, if you can. Check the same text at the same size and weight, and see whether headings, buttons, and longer lines fit as expected.

A font can look similar in a preview but feel wrong in use. Test a few real phrases from the screen, including punctuation, short labels, and any numbers users need to read quickly.

What makes a font look like a match?

Letter shapes

Start with letters that differ clearly from one typeface to another. A single-storey a has a simpler form than the double-storey a common in many interface fonts. The lowercase g, the tail on y, and the shape of a question mark can also help you distinguish close candidates. If the UI uses many technical labels, compare the characters users might confuse, such as O, 0, I, l, and 1.

Width and spacing

Look at how much room a phrase takes up. A wider typeface may make a menu label wrap or push nearby controls out of place, even when individual letters look close. Compare the length of a full heading or button label, not just one letter. Also notice whether the gaps between letters feel tight, even, or open.

Weight and size

Dark interfaces often use different weights for headings, body text, and secondary labels. Compare a candidate at a similar size and weight to the text on screen. A bold sample cannot tell you much about a thin label, and a small sample may hide details that are obvious at a larger size.

Several fonts look almost identical

That is normal. A font preview can help you shortlist candidates, but it does not identify the original typeface automatically. Screen scaling, browser rendering, and the font size can all change how letters look. Choose the closest option based on the details that matter in your interface, then check it in the intended app or browser.

If you cannot find a close match

1. Check the browser and device. Use Chrome or Edge on a computer for the full Installed Fonts experience. A phone browser or another desktop browser may not provide access to local fonts.
2. Check local-font permission. If you denied a browser prompt, look in the browser's site permissions for local font access, allow it for TooLab, and reload the page. The wording and location of this permission can vary by browser version.
3. Confirm the font is installed. The tool can preview fonts on your computer, not fonts that exist only in a design file or on another person's device. On Windows 11, open Settings › Personalization › Fonts to check installed fonts. On macOS, open Font Book from Applications and search for the font name.
4. Install the right font file if you have permission to use it. Follow the font provider's instructions, then reload the page and check the font list again. A family name may have several styles, so confirm that the weight you need is installed too.
5. Compare a different sample. If candidates are hard to tell apart, use a longer heading or include the most distinctive characters in the UI. Then compare the same text at a similar size in the actual interface.

If you need help checking which typefaces are installed before comparing them, see How to see which fonts are installed on your PC.

Keep the font and the colors separate

A font can match the style of a dark-mode interface without matching its readability. Judge the typeface using the letter shapes, weight, and line length, then check the text color against the real background separately. Very thin lettering can be hard to read on a dark screen, especially at small sizes. If the closest visual match is difficult to read, prefer a clearer weight or a similar, more legible typeface.