Font fallback and layout tester
THE FONT WORKBENCH
Make the details work for your text
See how your text changes before a webfont loads. Compare the primary font, a fallback and an adjusted fallback, then export CSS to help reduce layout movement.
Start with your font files
Use font files you have permission to upload. TTF, OTF, WOFF and WOFF2 are supported.
Preview, adjust and compare
Character checks show missing code points. Always inspect the rendered text too.
Starting values for this sample. Replace the font paths, test other text and check your target browsers. Metric overrides use the primary font’s default metrics.
How to get useful results
Upload your primary font, then choose a local fallback or upload another font. Set your text and column width. Fit the fallback to the sample, inspect line counts and block heights, and fine-tune the size adjustment. Download the CSS and replace its placeholder font paths with your own files.
What to keep in mind
This is a text-layout comparison, not a measured CLS score. The suggested adjustment fits this sample at the default font instance. Other text, font styles, browsers and operating systems can behave differently. Local fallback fonts must exist on the visitor’s device; uploaded fallback fonts also need to load.
Previews are private and expire after 15 minutes. Clear the workspace to request their deletion sooner. Generated webfont kits are temporary and expire automatically.
Explore all font tools