Skip to main content

Font previewer

Upload fonts and preview with custom text, multiple sizes, weights, and compare side by side.

Free & unlimitedWorks offline

Upload one or more font files to see previews.

All processing happens in your browser. No data is sent to any server.

Installing a font just to find out whether you like it is a bad trade: the font lands in your system list forever and you still have to open something to look at it. Here the file is loaded with the browser FontFace API from a local blob URL, so it renders in this tab and is gone when you close it — nothing is installed and nothing is uploaded. Four views answer the usual questions: a waterfall across nineteen sizes from 8 to 120 px, all nine CSS weights at once, six character sets including Latin Extended, and a paragraph with adjustable line height and letter spacing. Load several fonts and turn on compare to see them against each other in the same view.

Key facts about Font previewer

Key facts about Font previewer
Loading mechanismFontFace with a blob URL created from your local file, added to document.fonts — nothing is installed on your system
FormatsTTF, OTF, WOFF and WOFF2, checked by extension before loading
Multiple fontsLoad as many as you like; each keeps its own weight, style and colour setting
Waterfall sizes19 preset sizes — 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 84, 96 and 120 px — individually selectable
Weights viewAll nine CSS weights from 100 Thin to 900 Black rendered from the one file you loaded
Synthetic weight caveatA single-weight font has only one real weight. The other eight rows are the browser faux-bolding it, so they show what a careless CSS rule would produce, not what the family looks like
Character setsUppercase, lowercase, numbers, punctuation, symbols and Latin Extended — a missing glyph shows as a fallback or a box, which is how you spot an incomplete character set
Paragraph viewYour own preview text with line height and letter spacing controls, for reading rather than for lettering
Compare modeSide-by-side columns, same text, same size, so differences in x-height and width are visible rather than remembered
BackgroundLight and dark toggle, because a font that looks crisp on white can smear on dark
OutputScreen preview only — there is no export, no CSS generation and no download
Session lifetimeFonts live in the tab. Reloading the page clears them and the blob URLs are revoked

What happens to your file

The font file is never uploaded. A blob URL is created from your local file, handed to the FontFace API, and the face is registered with this document only — it is not installed into your operating system, not available to other sites, and not written to disk. There is no upload endpoint and no server-side copy. This matters for licensed fonts in particular: a commercial or client-supplied font file can be evaluated here without it ever being transmitted to anyone. Closing or reloading the tab revokes the blob URLs and removes the faces entirely.

About this tool

  1. 1

    Drop the font file

    Drag in a .ttf, .otf, .woff or .woff2, or browse for several at once. Each one loads into the page as a temporary face.

  2. 2

    Type the text you actually care about

    Replace the default pangram with your product name, a headline or a paragraph from the real copy. Fonts are judged on the words you will use, not on the alphabet.

  3. 3

    Run the waterfall

    Pick the sizes that matter to your design and look down the column. Most typefaces have a size below which their detail collapses — the waterfall shows you where.

  4. 4

    Check the character set

    Switch to the character set view and look for boxes or mismatched shapes in punctuation, symbols and Latin Extended. That is where a cheap font runs out.

  5. 5

    Read a paragraph

    Set line height and letter spacing close to your design and read a real paragraph. A face that looks great at 72 px can be unreadable at 16.

  6. 6

    Compare candidates

    Load your shortlist and turn on compare mode to see them side by side at the same size, which exposes differences in x-height and width immediately.

Specs & compatibility
Accepted extensions.ttf, .otf, .woff, .woff2
Variable fontsLoad and render at their default instance; there are no axis sliders here
Size range8 px to 120 px in the waterfall
Weights rendered100 to 900
Line heightAdjustable in the paragraph view
Letter spacingAdjustable in the paragraph view
Preview backgroundLight or dark
InstallationNone. The font is not added to your system font list
Browser supportAny browser with the FontFace API — Chrome, Edge, Firefox, Safari
Cost / accountFree, unlimited fonts, no signup
  • Judge body text at 16 px and headlines at 48 px or more — the two jobs need different qualities and few faces do both well.
  • In the character set view, look at the Latin Extended row before buying: accented characters are where budget fonts are incomplete.
  • If all nine weights look almost identical, your file is a single static weight and the browser is faking the rest.
  • Load the regular and the bold files of the same family separately rather than trusting the weights view for a real bold comparison.
  • Toggle the dark background before shipping a dark-mode design: thin faces that look elegant on white often disappear on black.
  • Set the letter spacing to a small negative value to see how a display face behaves when a designer inevitably tightens it.
  • Test numbers explicitly if the font is for a dashboard — tabular versus proportional figures is invisible in a pangram and obvious in a table.
  • TTF, OTF, WOFF and WOFF2
  • 19-size waterfall
  • All nine CSS weights
  • Six character sets
  • Paragraph view with line height and letter spacing
  • Side-by-side compare mode
  • Light and dark preview
  • Custom preview text
  • Deciding whether a purchased or client-supplied font is right before installing it.
  • Checking that a webfont covers the accented characters your languages need.
  • Comparing a shortlist of typefaces with your own headline rather than a pangram.
  • Finding the smallest size at which a display face stays legible.
  • Testing how a font reads on a dark background before committing to dark mode.
  • Previewing a font on a locked-down machine where you cannot install anything.
No. The file is turned into a blob URL and registered with the FontFace API for this document only, which means the browser can render it on this page and nowhere else. It is not added to your system font list, not visible to other applications or other websites, and not written anywhere on disk. Reloading or closing the tab revokes the blob URL and removes the face, leaving your system exactly as it was.
No. Everything happens in this tab: the file is read locally, handed to the browser text engine, and rendered. There is no upload endpoint and no server-side copy, which is what makes the page usable for licensed fonts. A commercial font, a client-supplied face or an unreleased in-house typeface can be evaluated here without the file leaving your machine or appearing in anyone logs.
Because your file contains one weight. The all-weights view applies CSS font-weight values from 100 to 900 to the single face you loaded, and when a real weight is not available the browser synthesises one by thickening the outline — faux bold. The view is still useful: it shows what happens when CSS asks for a weight the font does not have. For a true comparison, load the family regular and bold files separately.
They load and render at their default instance, but there are no axis sliders, so you cannot explore weight, width or optical size along their variable axes here. What you see is the named default the font ships with. The all-weights view will produce something for a variable font because CSS font-weight maps onto the weight axis in modern browsers, but that is browser behaviour rather than a control this page exposes.
TTF, OTF, WOFF and WOFF2 — the four the browser text engine can consume, checked by extension before loading. Older webfont formats such as EOT and SVG fonts are not supported and are effectively obsolete. If you have a font in a format this page will not take, convert it first; a TTF or OTF is the most portable starting point and converts cleanly to both WOFF flavours.
No. This is a preview surface only: there is no image export, no CSS snippet generator and no download. The reason is scope — rendering the font honestly is the job, and a specimen sheet or a font-face rule is a different tool with different decisions in it. Take a screenshot if you need to show someone a comparison, and write the font-face rule alongside the file you are actually going to ship.

Related tools

View all

Part of File viewers that open the file in your browser

Updated

We use anonymous analytics to improve ToolChamp. No personal data is stored or sold. Privacy Policy