Web Font Preview & Tester

About Web Font Previewer

Your own text, set in the font file you are about to ship, in the browser that will have to render it. The file is read in the tab, turned into a data URI, and loaded through a real @font-face rule — the same mechanism a site uses, which is why what you see here is what visitors will get, including the parts that disappoint.

A specimen on a foundry's site answers the wrong question. It shows the font at display sizes in the foundry's own layout. What you need to know is whether it works at 15px in your body copy, at your line height, in your weight, on your background colour — and whether it even contains the characters your content uses. All of that is set here, and the missing-glyph check is the one that catches problems before a customer's name renders in a substituted font.

Without a file, the stacks are the system fonts your machine already has. That is useful for comparison and misleading for anything else: what you see is what *your* computer has installed, and a visitor without it sees the next name in the list.

Where it helps

• Loads the real file through a real @font-face, so the rendering is the browser's, not an approximation of it.
• Sets your own copy at your own size, weight, line height and colours — the conditions the font will actually work in.
• Lists the characters the font has no glyph for, which is how a substituted character is caught before a customer sees it.
• Reads the family name, style, glyph count and declared weight out of the file, so a mislabelled download is obvious.
• The size ladder shows the same line at eight sizes, where a font that only works large gives itself away.
• The file never leaves the tab — nothing is uploaded, and no font service is involved.

Limits

• WOFF2 is Brotli-compressed and its tables are not unpacked here, so the metadata rows are short for the format you are most likely to ship. The preview itself is unaffected.
• Variable font axes are not exposed: a variable file previews at its default instance rather than across its range.
• A weight or an italic the file does not contain is synthesised by the browser — smeared or slanted outlines rather than drawn ones — which looks worse than a real cut and is easy to mistake for one.
• OpenType features — ligatures, alternates, tabular figures, small caps — are not toggled here.
• Nothing about licensing is checked. A font you can load in a browser is not a font you are licensed to publish.

Frequently asked questions

Is my font file uploaded anywhere?

No. It is read in the browser, encoded as a data URI, and handed to the page's own font machinery. Nothing is sent to a server, which also means a font under a restrictive licence stays where it is.

Why are there no details for my WOFF2?

WOFF2 is Brotli-compressed, and this tool does not unpack it to read the name and glyph tables. The browser has its own decompressor, so the specimen renders correctly — only the metadata rows are missing. Preview the TTF or OTF the WOFF2 was built from to see those.

Which format should I actually serve?

WOFF2 alone. Every browser in current use supports it and it is roughly 30% smaller than WOFF. The old stack of EOT, TTF and SVG fallbacks exists for browsers nobody is shipping to any more.

Why does the bold look wrong?

Probably because the file has no bold in it, so the browser is faking one by thickening the outlines. A real bold is a separately drawn cut loaded as its own @font-face with font-weight: 700, and it is visibly better.

Related tools

• Icon Font Generator — Build a web font from SVG icons or an SVG font
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS