Skip to content

Latest commit

 

History

History
24 lines (20 loc) · 867 Bytes

font-swap-in-css.md

File metadata and controls

24 lines (20 loc) · 867 Bytes

Use font-display: swap; to render text in fallback font until @font-face font loads

When using the @font-face in CSS, set the font-display property to swap. This will render text in the next available fallback font until the custom font has loaded.

Here's a tweaked snippet from MDN:

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

This would then apply to this snippet:

p {
  font-family: "ExampleFont", "Helvetica", "Arial", sans-serif;
}

Learned from this CSS Tricks article.