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

Preview

Brand Font

Drop font here

Fallback Font

Adjust Fallback

Adjust Size

Ascent Override

Descent Override

Line-Gap Override

Font Size Adjust

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