Why are the weight options buttons rather than a slider?

Because a face only ships the weights it ships. A slider would imply that every value between 100 and 900 is available, whereas the buttons offer the weights in the catalogue. Selecting one that a particular face does not carry simply renders the nearest available weight rather than synthesising a new one.

Is the italic real or synthesised?

It depends on the face. Some catalogue families ship a true italic with its own letterforms, and others do not, in which case the browser slants the roman. Nothing in the panel says which applies, so if the italic is central to a design, compare it against the roman and check whether the letterforms changed shape rather than just leaning.

What does the waterfall panel add?

It shows the same setting at seven sizes at once, from 14px to 96px, which is how you see whether a face that looks confident at display size holds together in a caption. Every row shares the weight, tracking and italic setting of the main preview, so the panel is a view of the current setting rather than a separate comparison.

Why is tracking measured in pixels here?

Because that is how tracking is adjusted on a display heading: a designer nudges the space between letters by a pixel or two until the line sits right. The CSS panel writes the same pixel value, so the visual adjustment and the declaration always agree. For tracking that scales with the type size, ems are the better unit and the custom preview uses them.

Can I preview a font file from my own machine?

Not here. The picker offers the faces this domain loads, which is deliberate: it keeps one catalogue so a family can never appear in a list without its webfont being available. A file you own has to be added to that catalogue, or tested in the declaration builder and rendered on a page of your own.

Font Previewer

The quick brown fox jumps over the lazy dog

Waterfall preview

14pxThe quick brown fox jumps over the lazy dog

18pxThe quick brown fox jumps over the lazy dog

24pxThe quick brown fox jumps over the lazy dog

32pxThe quick brown fox jumps over the lazy dog

48pxThe quick brown fox jumps over the lazy dog

72pxThe quick brown fox jumps over the lazy dog

96pxThe quick brown fox jumps over the lazy dog

CSS

font-family: 'Inter', sans-serif;
font-size: 64px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0px;
font-style: normal;

You Might Also Need

Web Font Tester

Test web fonts live in your browser

Custom Text Font Preview

Try fonts with your own copy

Waterfall Font Preview

See a font at every size at once

Font Specimen Sheet

Generate a printable specimen sheet

The font previewer renders your own copy in any face from the shared catalogue and adjusts the four properties that change how a setting reads. Size, weight, leading and tracking are all live, with an italic toggle, and the page also shows the same face down a size ladder.

What is Font Previewer?

The font previewer takes a sample string and five controls, then renders the preview sample text large, again down a fixed ladder of sizes, and once more as the CSS that would reproduce it.

The family list is the catalogue the whole typography domain loads, so every face in the picker has its webfonts on the page already.
Size runs from 12px to 160px, defaulting to 64px, which is a display size rather than a body one.
Weight is a row of buttons rather than a slider, so only the weights a face actually ships can be selected, and the default is 600.
The letter spacing slider spans minus 5 to 20 pixels in half-pixel steps, while line height spans 0.8 to 2.5 in steps of 0.05 with a default of 1.2.
The italic toggle switches the style, and the preview panel is sized to hold a display setting without reflowing the page as the sample changes.

The built-in ladder is the part that separates this from a single-line preview. The sample is rendered again at 14, 18, 24, 32, 48, 72 and 96 pixels with the same weight, tracking and italic setting, each row labelled in pixels and truncated with an ellipsis, so the face's behaviour across the whole range is visible without touching the sliders. That is what makes a display face that looks confident at 72px reveal whether it holds up at 18px, and vice versa. The tracking control is deliberately in pixels rather than ems, which is what a designer reaches for when nudging a heading, while the CSS panel writes the same value out with the family stack, size, weight, leading, tracking and style so the setting can be lifted into a stylesheet.

The face list is the shared catalogue. A font file that is not loaded by this domain cannot be previewed here.
The italic toggle applies a synthetic slant when a face ships no true italic, and nothing warns you when that happens.
The built-in ladder uses seven fixed sizes and a line height of 1.1, so it is not a substitute for a ladder you choose yourself.
No metric data is shown, so two faces that look similar here cannot be compared on x-height or cap height.
The output is a handful of declarations rather than a class, and nothing is saved between visits.

Use it when a face is being chosen for a specific line of copy, when a heading needs its tracking nudged against a real layout, or when you want to see how a family behaves from 14px to 96px before committing to it. Where the size ladder has to match a real scale, the waterfall font preview takes an editable list of sizes, and where the copy itself matters more than the display setting, the custom text font preview prints its own word and character counts. The web font tester covers what the reader sees before the file arrives, the custom text font preview is the version built for pasting real copy, and the waterfall font preview takes an editable ladder of sizes when the 14-to-96 default does not match a project's scale.

How to use Font Previewer

Paste the copy you actually want to judge into the sample field, then pick the family from the catalogue list.
Drag the size slider from a display size down to a body size and back, watching whether the face keeps its character at both ends.
Set the weight from the buttons, then use line height and tracking to find the setting where the sample sits comfortably.
Check the same face down the waterfall panel, then copy the CSS block with the six declarations you want to keep.

When to use Font Previewer vs related tools

Reach for it when a face is being chosen for a headline, when a setting needs a small correction to tracking or leading, or when a client needs to see the same copy in a family from the catalogue in seconds. It is the general-purpose entry point to the domain's faces. For a size ladder that matches a real type scale, the waterfall font preview is the closer tool, the font-specimen sheet lays out the full character set for a handover, and the custom text font preview is the version to use when the copy is a paragraph rather than a headline.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.