Font Previewer

1. Choose Upload a font file or Use a browser font.
2. Drop a file into Drop a font file here, or choose browse files. For a browser font, select a face with Font.
3. When multiple files appear, select an uploaded face from the face list.
4. Enter text in Sample text, then adjust Size, Weight, Style, Line height, Letter spacing, Text color, and Background.
5. Choose Copy CSS to copy the active font and preview settings.

Preview a local font file

The upload accepts TTF, OTF, WOFF, and WOFF2 data. Select multiple files in one browse action, then switch between the faces listed below the drop area. If the file signature is not recognized, the page shows an error. A face that has not finished loading can remain marked (loading...).

Test browser fonts with sample text

Choose Use a browser font, then select a name in Font. The list is grouped as Sans-serif, Serif, Display, Monospace, and System. For the selected entry, Font metadata shows Family, Source, Category, Font stack, and Glyph data. Browser fonts have no glyph data for the Glyph grid.

Change font preview settings

Sample text holds up to 600 characters. It starts with the pangram below. If you clear the field, the preview contains one blank space.

The quick brown fox jumps over the lazy dog

Size ranges from 8px to 200px. Weight provides 100 through 900, and Style switches between Normal and Italic. Line height ranges from 0.80 to 2.50. Letter spacing ranges from -10px to 60px. Text color and Background set the two preview colors.

Inspect font metadata and glyphs

For an uploaded TTF or OTF, Font metadata can show Family, Subfamily / style, Format, File size, Detected weight, Detected style, Units per em, Glyph count, Version, Copyright, Designer, License, and Variable axes. Values that the file lacks appear as Not present. WOFF and WOFF2 still preview, with Format and File size shown, while the page does not parse their embedded metadata.

Character sets contains Uppercase, Lowercase, Numbers, Punctuation, and Accented Latin samples. The Glyph grid reads code points from an uploaded TTF or OTF, orders them by Unicode value, and displays up to 300. WOFF, WOFF2, and browser fonts leave this grid unavailable. A file without readable cmap data also produces no glyph cells.

Copy CSS from the font preview

Copy CSS includes the active font choice, size, weight, style, line height, letter spacing, text color, and background. For an upload, its @font-face rule points to the selected filename. Replace that filename with the path where your site serves the font.

.text {
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.30;
  letter-spacing: 0px;
  color: #111111;
  background-color: #ffffff;
}

Where font previewing comes up

Use a heading, paragraph, or interface label in Sample text when checking a local TTF or OTF. Character sets puts capitals, numbers, punctuation, and accented Latin samples beside the main preview.

With several uploads, select each face and keep the same Sample text and settings. Copy CSS then gives you the declaration to adapt for the hosted file.

Font Previewer and Font Inspect Tools

Font Previewer combines the live specimen with typography controls, color controls, Font metadata, Character sets, the Glyph grid, and Copy CSS. Visit Font Inspect Tools when the task is another kind of font inspection.

Frequently asked questions