Font Preview
Preview your own font files with your own text, the whole family at once. Drop several TTF, OTF, WOFF or WOFF2 files, or open a folder, and every style is shown with your text, in family order: the width, italic flag and weight class are read from each file, so Light comes before Regular, Regular before Bold, and the italics follow the uprights. Show one line per style, a size waterfall from 12 to 96 px, or a paragraph, on a light or dark background, or both side by side. Characters your text uses that a style does not have are named under that style. Save the whole preview as a PNG, drawn with the same fonts, to share with a client or a team. Nothing is uploaded.
100% private — everything runs in your browser. Everything runs in your browser; your font files are never uploaded.
Styles in the preview
Preview
Save
Runs in your browser: your font files are read on your device and never uploaded. The font parser (opentype.js) and the WOFF2 decoder load from the jsDelivr CDN. You may use what you make here, including commercially, with no credit needed. The fonts themselves stay under their own licences.
How to preview your fonts
- Drop your font files on the box (several at once), open a folder, or click Try a sample family.
- Type your own text, or pick the alphabet, numbers or a paragraph.
- Choose the view (lines, waterfall or paragraph), the size and the background.
- Download the preview as a PNG.
What you can use it for
- See every weight of a family you bought or downloaded
- Check that a family’s styles sit in the right order
- Show a client a family on light and dark backgrounds
- Check that your headline text exists in every style
- Compare a font’s weights at small and large sizes
- Make a PNG specimen of a font family
How the styles are ordered
| usWeightClass | Weight name |
|---|---|
| 100 | Thin |
| 200 | Extra-light |
| 300 | Light |
| 400 | Regular |
| 500 | Medium |
| 600 | Semi-bold |
| 700 | Bold |
| 800 | Extra-bold |
| 900 | Black |
| usWidthClass | Width name | Width |
|---|---|---|
| 1 | Ultra-condensed | 50% |
| 2 | Extra-condensed | 62.5% |
| 3 | Condensed | 75% |
| 4 | Semi-condensed | 87.5% |
| 5 | Normal | 100% |
| 6 | Semi-expanded | 112.5% |
| 7 | Expanded | 125% |
| 8 | Extra-expanded | 150% |
| 9 | Ultra-expanded | 200% |
Both values come from the OS/2 table of each font file, as the OpenType specification defines them. The italic flag comes from the same table (fsSelection) or the head table (macStyle).
The sample family
| Position | Style | Weight class | Width class | Italic | Added as file |
|---|---|---|---|---|---|
| 1 | MGD Test Sans Condensed | 400 (Regular) | Condensed (75%) | no | 3 |
| 2 | MGD Test Sans Light | 300 (Light) | Normal (100%) | no | 2 |
| 3 | MGD Test Sans Regular | 400 (Regular) | Normal (100%) | no | 5 |
| 4 | MGD Test Sans Bold | 700 (Bold) | Normal (100%) | no | 7 |
| 5 | MGD Test Sans Black | 900 (Black) | Normal (100%) | no | 4 |
| 6 | MGD Test Sans Italic | 400 (Regular) | Normal (100%) | yes | 6 |
| 7 | MGD Test Sans Bold Italic | 700 (Bold) | Normal (100%) | yes | 1 |
Try a sample family adds seven styles of our own test font in a mixed-up order; the preview puts them in family order as shown, computed by the tool’s own code.
Views
| View | What it shows |
|---|---|
| One line per style | Your text once in each style, at the size you set |
| Size waterfall | The first line of your text at 12, 16, 20, 24, 32, 40, 48, 64, 72, 96 px in each style |
| Paragraph | Your text as a block, so you can judge spacing and colour on the page |
| Light and dark side by side | The same view twice, dark text on white and light text on near-black |
Each style is labelled with its family, style name, weight number and name, width (if not normal), italic and file format.
What the PNG contains
| PNG width | Scale of the type |
|---|---|
| 1200 px | 1 × the sizes on screen |
| 1600 px | 1.33 × |
| 2400 px | 2 × (sharper for slides and print) |
The PNG is drawn on a canvas with the same font files, so it matches the preview. Its height follows the number of styles.
Next steps
To look inside one font (every glyph, metrics, licence fields), use the Character Map or the Font Metadata Inspector. To test text in system and Google fonts, use the Font Tester; to compare fonts by x-height, Font Comparison; for variable fonts, the Variable Font Tester. To use the family on a website, the @font-face Generator writes the CSS.
Sources
Sources: OpenType specification: OS/2 table (usWeightClass, usWidthClass, fsType, fsSelection); W3C: WOFF File Format 2.0; opentype.js (MIT), version 1.3.4.
More free tools
Working with font files?
Inspect, convert and test fonts with free typography tools that run privately in your browser, with no sign-up and no watermark.
Frequently asked questions
Is this font preview free?
Yes. There is no sign-up, no watermark and no limit on how many files you add. The files are read in your browser, so they never leave your device.
How many fonts can I preview at once?
As many as your browser handles: drop a whole family or open the folder it came in. Files that are not TTF, OTF, WOFF or WOFF2 are skipped and counted.
How does it order the styles?
By the values in each file’s OS/2 table: width class first (condensed before normal), then upright before italic, then weight class (100 Thin to 900 Black). You can switch to the order you added them or to file names.
Does it open WOFF2?
Yes. WOFF2 files are decoded in your browser for reading their names and weights, and the browser draws them as usual.
Why does a character look different in one style?
That style does not have the character, so the browser draws it in a fallback font. The preview names those characters under the style.
What does the PNG contain?
The same view you see: every style with its label and your text, on the background you chose (both side by side if you picked that), 1200, 1600 or 2400 px wide.
Can I preview Google Fonts or installed fonts here?
This page previews font files you add. To try your text in system and Google fonts, use the Font Tester; to compare two to four fonts by their measurements, use Font Comparison.
Is my font uploaded?
No. The files are read by JavaScript in your browser, so it is safe to preview licensed or unreleased fonts.