Font Preview
Test text in your installed fonts and font files side by side. Runs in your browser.
About this font preview
This font preview tool shows your text in the fonts on your device and in font files you drop in, side by side. It's for designers picking a typeface, developers checking a web font, and anyone who wants to see a font before installing it.
Type a word and every font updates as you type. Pin the ones you like. Then open one in Specimen view for a size waterfall, its real weights, variable axes, OpenType features and a glyph map.
Font files are read in your browser's memory. Nothing is uploaded, so you can test a paid or client font safely.
Features
Installed fonts, two ways
In Chrome and Edge on desktop, one click lists every family you have. Other browsers get about 100 common Windows, macOS and Linux fonts, found by measuring text.
Font files without installing
Open TTF, OTF, WOFF, WOFF2 and TTC files. Each gets a pinned card next to your installed fonts.
Type controls
Size 8 to 200px, weight 100 to 900, line height, letter spacing, italic, and text and background colors.
Variable fonts and OpenType features
Dropped files show a slider per axis, their named instances, and switches for features like small caps, oldstyle figures and stylistic sets.
Glyph map
Browse characters by Unicode block with the arrow keys. Each glyph shows its code point with HTML, CSS and JavaScript escapes to copy.
Details and CSS
See version, designer, license, glyph count and metrics, then copy an @font-face block and a CSS rule matching your settings.
How to use the font preview
- 1Type your text, then show your installed fonts or drop font files.
- 2Set size, weight, spacing and colors, and pin fonts to compare them.
- 3Inspect a font for its waterfall, glyphs and details, and copy the CSS.
When to use it
Choosing a logo font
Type the brand name, switch to Grid and scan your library at headline size. Pin five candidates, then build colors to match with the palette generator.
Checking a web font before launch
Selling in Poland or Turkey? Drop the font, open Glyphs and look for ą, ł, ş and ğ in Latin Extended-A before you ship.
Bengali, Arabic or Hindi text
The script samples show which fonts really cover your language and which quietly fall back to another font.
How can a website see the fonts on my computer?
Two ways. The Local Font Access API, in Chrome and Edge 103 and later on desktop, returns every installed family and style. It only runs after you click and allow a permission prompt.
Other browsers have no such list, so the tool measures. It draws a test string in a named font with a generic fallback. A different width means the font is installed. That only works for names it already knows, which is why the full list needs the API.
Safari only lets pages use fonts that ship with macOS or iOS, to limit tracking. Fonts you added yourself won't appear there. Dropping the file always works.
TTF vs OTF vs WOFF vs WOFF2: what's the difference?
All four carry font data defined by the OpenType specification, also published as ISO/IEC 14496-22. They differ in outlines and packaging.
- TTF uses TrueType quadratic curves and is the most common desktop format.
- OTF usually holds CFF outlines with cubic curves, typical of foundry fonts.
- WOFF wraps either one in zlib compression for the web. It became a W3C Recommendation in 2012.
- WOFF2 uses Brotli and is often about 30% smaller than WOFF. Serve this one on websites.
- TTC packs several fonts in one file. Browser support is uneven.
Why does bold sometimes look smeared?
If you ask for a weight the font doesn't have, the browser fakes it by thickening the outlines. That's synthetic bold, and it looks blurry next to a real one. A missing italic becomes a slanted roman the same way.
The weights strip in Specimen view draws Ag at every weight from 100 to 900. If 500 and 700 look identical, or 700 looks smudged, the family lacks those weights. Load only the weights you really have.
What is a variable font?
A variable font stores a range of styles in one file. Each axis has a four-letter tag: wght (weight), wdth (width), slnt (slant), ital (italic) and opsz (optical size) are the registered ones. Custom axes use capitals.
The tool reads the axis ranges from the font's fvar table, so font-weight works across the whole range and each slider writes an exact font-variation-settings value.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Installed fonts | Full list in Chrome and Edge, common fonts detected elsewhere | Chrome only, or none |
| Font files | TTF, OTF, WOFF, WOFF2 and TTC, many at once | One file at a time |
| Compare | Your files and installed fonts side by side, with pins | Separate tools for each |
| Variable fonts | Axis sliders, named instances and CSS output | Ignored |
| Glyph map | Exact for files, estimated for installed fonts | Files only, or missing |
| Privacy | Fonts stay in your browser | Some upload the file to a server |
Tips
- Preview your real words. A font that shines in a pangram can have an awkward g or R in your brand name.
- Pick Numbers & symbols from the samples to check figures, currency signs and quotes in one line.
- Once you settle on text and background colors, run them through the contrast checker for WCAG 2.2 AA.
- Judge body text with real length. Paste in placeholder paragraphs and try 16px at line height 1.5.
- Bijoy-typed Bengali only displays in ANSI fonts such as SutonnyMJ. For Nirmala UI or Noto Sans Bengali, first convert Bijoy text to Unicode.
Questions
How do I see all the fonts installed on my computer?
Open this page in Chrome or Edge on a desktop, click Show all my installed fonts and allow the prompt. Every family appears as a card with your text, and you can filter by name.
Why don't Firefox or Safari show all my fonts?
They don't support the Local Font Access API. The tool still finds about 100 common fonts by measuring text. Safari also hides fonts you installed yourself, so drop the file instead.
Can I preview a font without installing it?
Yes. Drop the TTF, OTF, WOFF or WOFF2 file onto the tool. It loads into this page only and is gone when you close the tab.
Is my font file uploaded anywhere?
No. The file is read in your browser's memory and handed to its own font engine. No server sees it, which matters for licensed fonts.
Why does WOFF2 show a preview but no details?
WOFF2 uses Brotli plus transformed tables, which this tool doesn't unpack. The browser still renders it. For names, metrics and an exact glyph list, open the TTF or WOFF version.
How do I check if a font supports my language?
Open Glyphs and pick your script's Unicode block, such as Bengali or Cyrillic. The list is exact for dropped files and estimated for installed fonts. The Pangrams view shows real sentences too.
How do I use a font on my website?
Serve it as WOFF2 with an @font-face rule. Specimen view gives you the block with the right format hint and weight range. Point the URL at your hosted file, and check the license allows web use.
Does it load fonts from Google Fonts?
No. The tool makes no network requests. It shows fonts on your device and files you open. To try a Google font, download its files and drop them in.