Core Code
Core Code Modern Dev Handbook

Font Display Swap

The font-display property improves loading behavior.

Preview

Code

<style>
@font-face{
font-family:"SwapFont";
src:url("https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf");
font-display:swap;
}

p{
font-family:"SwapFont", sans-serif;
}
</style>

<p>Font display swap example</p>

More CSS Custom Fonts Examples (8)

example Basic @font-face open example example Multiple Font Formats open example example Font Weight Variation open example example Font Style Variation open example example Font Fallback Stack open example example Local Font Source open example example Google Font Example open example example Custom Font UI Example open example