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: normal;
    descent-override: normal;
    line-gap-override: normal;
}

h1 {
    font-family: 'FredokaOne-Regular', 'Adjusted Arial Fallback';
}
            
Attempt to load or use the font failed. Try a different one instead.