Judging a face properly
Test with the words you will actually set — a logo wordmark behaves nothing like body copy. Check the characters that expose weak fonts: 1 vs l vs I, 0 vs O, the digits as a group. Then try 400 weight at 15px, because that is what paragraphs are, and plenty of display faces fall apart there.
Web-safe stacks and your own files
The listed stacks render from fonts already installed on the visitor's machine — zero download, zero layout shift, which is why system-ui has become the default of most design systems. The upload option uses the browser's FontFace API to render a TTF, OTF or WOFF entirely locally: useful for previewing a font you are considering buying, without installing it system-wide.
Frequently asked questions
Does anything get uploaded?
No. Fonts you drop in are loaded locally and never uploaded, which matters for a licensed typeface.
Why does my font look different in the browser than in my design tool?
Different rasterisers and hinting. macOS, Windows and each browser render the same outlines slightly differently, and it is most visible at small sizes.
How many weights should I load?
Usually two — regular and bold. Each weight is a separate download, and a variable font is often smaller than three static ones.
What is the flash of unstyled text?
The browser showing a fallback while the web font loads. font-display: swap controls it; the real fix is matching the fallback’s metrics so the swap does not shift the layout.
Something wrong with this tool, or an idea for it? Tell us