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 (adjusted)

Preview

Brand Font

Drop font here

Adjust Fallback

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';
}