Fallback Font Generator

Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors. See demo.

The Lion and the Unicorn

Fallback Font (adjusted)

The Lion and the Unicorn

Brand Font
Drop font here
Your CSS rules
@font-face {
    font-family: 'Adjusted Arial Fallback';
    src: local(Arial);
    size-adjust: 100%;
    ascent-override: 100%;
    descent-override: 100%;
    line-gap-override: 0%;

h1 {
    font-family: 'Comic Sans MS','Adjusted Arial Fallback';
⚠️ These aren't the droids we're looking for.