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
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.