How to preview fonts
- Type your own sample text, such as a brand name or a headline.
- Adjust the size, weight and italic, and switch to a dark background to see how the type looks in dark mode.
- Filter the list by name, and tap Copy CSS to get a
font-familydeclaration with a sensible fallback. - To test fonts you have downloaded but not installed, drop the .ttf, .otf or .woff2 files on the load box.
Which fonts are listed?
Websites cannot read your installed font list directly, for privacy reasons. This page checks about 70 popular fonts by drawing text in each and comparing the width with a fallback font: if the width differs, the font is installed. In Chrome and Edge on desktop, Show all installed fonts uses the Local Font Access API to list every font after you grant permission. Generic families such as system-ui and serif are always shown, because they map to a font on every device.
Comparing fonts side by side with your real text is the quickest way to choose one: some typefaces look great in the alphabet sample but awkward with your actual words, numbers or capitals. Check readability at body sizes (16–18 px) and character at headline sizes.
Font files you load are read in your browser and never uploaded; they disappear when you close the tab.
Why don't I see a font I installed?
It is not in the common list. Use "Show all installed fonts" in Chrome or Edge, or drop the font file onto the page.
Will visitors see the font on my website?
Only if they have it installed or you serve it as a web font with @font-face. Always include fallbacks in font-family.
Does weight work for every font?
Only weights the font actually includes render differently. Browsers fake bold for fonts without a bold weight.