# Fallback Font Generator: reduce font-related CLS

Canonical source : [Fallback Font Generator: reduce font-related CLS](<https://sebastien.rigaux.be/en/tech-watch/links/fallback-font-generator-reduce-font-related-cls>)

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.

- Selected on : 2026-10-27

- Entry updated : 2026-11-07T20:32:37+0000

- Format : Article

- Source language : EN

- Credit : @screenspan

Original resource : [Fallback Font Generator: reduce font-related CLS](<https://screenspan.net/fallback>)

Tags : Font optimization · [Web Performance](<https://sebastien.rigaux.be/en/tech-watch/tags/web-performance>) · [CSS](<https://sebastien.rigaux.be/en/tech-watch/tags/css>)

Available versions : [Français](<https://sebastien.rigaux.be/veille/liens/fallback-font-generator-reduire-le-cls-des-polices>) · [English](<https://sebastien.rigaux.be/en/tech-watch/links/fallback-font-generator-reduce-font-related-cls>)

[Back to tech watch](<https://sebastien.rigaux.be/en/tech-watch>)