Drop a variable font (or static weight family) and see every weight rendered side-by-side in a sample string. Pick the right weight for headlines, body, and accents.
Upload your variable font (or a static weight)
We enumerate named instances or step through the wght axis range
Get an HTML preview showing the sample string at every weight step
0 bytes uploaded. Font Weight Progression Viewer runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
Default is 'The quick brown fox jumps over the lazy dog' plus 'AaBbCc 0123'. Customise via the textarea — useful for previewing brand-specific text at every weight.
We render at the single weight available. To compare static weights, run the Font Comparison Overlay tool with two static files.
Both. Named instances (Thin, Light, Regular, Medium, Bold, Black) are shown when defined in fvar. Otherwise we show numeric weight values (100, 200, ..., 900).
Drop a variable font and see every axis (wght, wdth, slnt, ital, opsz, custom) with min/default/max values, named instances, and ready-to-paste CSS.
Open toolGenerate @font-face declarations for each named weight (Light, Regular, Medium, Bold, Black) of a variable font using font-variation-settings. Drop-in CSS.
Open toolUpload two fonts and see every glyph rendered side-by-side at the same em size. Spot rendering differences, weight mismatches, and missing characters.
Open tool