Font Previewer
Load your own TTF, OTF, WOFF or WOFF2 and set real text in it. Adjust size, weight, tracking and leading, then see the same font as a heading, a paragraph, a button and a navigation bar – the places it has to survive.
Drop your font here, or click to choose one
.ttf · .otf · .woff · .woff2 · up to 20 MB
The font is loaded into this tab only. Nothing is sent to this site, and nothing is stored.
How to use this tool
- Drop your font file onto the box above. WOFF2 works directly – the browser loads every web format without help.
- Type your own text. Set the words you are actually going to use: the product name, the headline, the client's surname.
- Adjust the controls for the free sample at the top.
- Scroll to the specimens. Those are fixed at the sizes those roles really use, so they show what the font does at 17px body copy rather than only at display size.
- Try the dark background before deciding. Many faces that look crisp on white go muddy reversed out.
Why the specimens are fixed sizes
Because a font judged only as one line of 48px display text will disappoint the first time it is set as a paragraph. The qualities that make a face look good large – tight spacing, delicate hairlines, dramatic contrast – are often the ones that make it hard to read small.
The specimen blocks are locked at 34px for a heading, 17px for body copy and 15px for interface text, because those are roughly the sizes real interfaces use. If the font is going to fail, it will fail there and not in the big sample.
About the weight selector
A static font file contains exactly one weight. If you pick 700 and the file is a regular, the browser will synthesise a bold by smearing the outlines – and it looks like it. That fake bold is a common way for a site to end up looking subtly wrong on one platform and fine on another, because different browsers fake it differently.
The page warns you whenever you select a weight other than 400. To use real weights, load the actual bold file, or use a variable font, which carries a genuine range in one file. The font analyzer will tell you which of those you have.
What this is not
This previews a font file you already have. It does not turn your text into decorated Unicode characters to paste into Instagram or Discord – that is the font generator, which is a different job entirely.
To weigh two or three candidates against each other under identical settings, the font comparison page puts them side by side. Once you have chosen, TTF to WOFF2 makes the file web-ready and the @font-face generator writes the CSS.