Sébastien Rigaux

Fallback Font Generator: reduce font-related CLS

View resource

screenspan.net

This tool adjusts a system font to more closely match a brand font while it loads. It generates the required @font-face rules—including size-adjust, ascent-override, descent-override, and line-gap-override—using a visual preview and adjustable controls.

The approach targets layout shifts caused by differences in font metrics. The resulting CSS can be copied into a project, though the page notes that the tool is not supported in Safari.

Screenshot of the Fallback Font Generator showing a comparison between an adjusted fallback font and a brand font, alongside generated CSS rules.