Skip to main content

Free online font viewer

View and test any font file

Open a TTF, OTF, WOFF, or WOFF2 file to see what is inside: its name and weight, every OpenType feature and variable axis, the languages it can write, its vertical metrics, and each character it includes. Type your own text, switch features on and off, and compare it with a second font before you use it.

Font viewer

Open a font file.

Read in your browser · nothing is uploaded

Choose a font file

Maximum 25 MB

Select a font to see its details, characters, and your own text.

How to preview a font file

  1. Drop a font file above, or browse for one on your device.
  2. Check its name, style, and weight to confirm it is the file you meant to use.
  3. Type the words you plan to set in it, adjust the size, and switch between light and dark backgrounds.
  4. Turn OpenType features on or off, or drag the axis sliders of a variable font, and copy the CSS that matches what you see.
  5. Search the character table, and open language support and vertical metrics for the technical checks.

From preview to your website

When the font looks right, convert it to WOFF2 on this page without choosing the file again. The web font kit is the same one the converter makes: the WOFF2 file, an @font-face rule that already uses the font's own name and weight, fallback fonts adjusted to its size, a README with preload tags and Next.js, Tailwind, and Astro code, and a sample page that shows the layout shift. Add the feature and axis CSS from the preview to the elements that need it.

Need a different format? The font converter also handles TTF, OTF, and WOFF.

What the viewer checks

Below the preview, each part of the font has its own panel. Open the ones you need; the rest stay folded.

OpenType features

Every feature tag in the font’s GSUB and GPOS tables, with its registered name, such as Small Capitals or Stylistic Set 1, and the name the font gives its stylistic sets. Switch one on and the preview changes at once. The CSS box writes font-variant-caps, font-variant-numeric, or font-variant-ligatures when one fits, and font-feature-settings for the rest.

Variable axes

A slider for each axis, from weight and width to optical size and custom axes, plus a menu of the named instances stored in the font. The CSS uses font-weight for the weight axis, which works with the range in the kit’s @font-face rule, and font-variation-settings for the others.

Two-font comparison

Load a second file and see both fonts set in the same text, at the same size, side by side or one above the other. The second file is read on your device too, and the viewer lists the characters it lacks.

Glyphs and search

Click any character to see it large against its baseline, x-height, cap height, ascender, and descender, with its glyph name, Unicode code point, width, and glyph ID. Search by the character itself, a glyph name like eacute, or a code such as U+00E9 or a range like U+0100–U+017F.

Language support

The characters in the font are checked against the letters of 175 Latin-script languages from the Unicode CLDR project. You see which languages are fully covered and, for the near misses, exactly which letters are missing.

Vertical metrics

Units per em, x-height, cap height, and the hhea, typo, and win ascender, descender, and line gap, drawn over the font’s own letters. The report also says which set macOS and Windows use, and whether line spacing will match.

Good to know

Font viewer questions

Is my font uploaded?

No. Your browser reads the file on your device, and nothing is sent to our server. That includes the second font you load for a comparison. Closing or leaving the page clears both.

Which font files can I open?

TTF, OTF, WOFF, and WOFF2 files up to 25 MB. Font collections (.ttc) are not supported. If some details of a font cannot be read, the preview usually still works.

How do I use an OpenType feature on my website?

Switch it on in the OpenType features panel and copy the CSS shown under the preview. Where CSS has a dedicated property, such as font-variant-caps: small-caps for Small Capitals, the viewer uses it, because those properties combine with each other. Stylistic sets and character variants need font-feature-settings, for example "ss01" 1.

How do I pick a weight or width in a variable font?

Drag the axis sliders or choose a named instance, then copy the CSS. Weight is written as font-weight, so it keeps working with the weight range in the @font-face rule. Width, optical size, and custom axes are written as font-variation-settings. Optical size follows the font size until you move its slider.

How is language support worked out?

The viewer compares the characters the font contains with the letters each language uses, upper and lower case, according to Unicode CLDR. It covers Latin-script languages only. It checks that the characters exist; it does not check how accents are positioned, so test important text in the preview as well.

Why does the font show three sets of ascender and descender values?

Fonts store vertical metrics in the hhea table and twice in the OS/2 table (typo and win). macOS uses hhea; Windows uses win, or typo when the font sets USE_TYPO_METRICS. When the sets disagree, line-height: normal can look different between systems. The metrics panel shows the difference.

Why do some characters look different from the rest?

A font only draws the characters it contains. When your text includes a character the font lacks, your device draws it with a fallback font instead. The viewer lists those characters under the preview so you can tell them apart.

Can I use this font on my website?

That depends on its license, not on the file format. Open “License and copyright” to read the terms stored in the font, and check them with the place you got it from. Converting a font to WOFF2 does not grant extra rights.