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