Mike Heavers

When you are using custom font faces, the default browser behavior is to withhold rendering of any on-screen text until that font is loaded. As a result, you get an onscreen experience of flickering text and improper layout until your fonts are properly loaded. However, by using CSS's

font-display

property, we can speed up font loading while simultaneously eliminating the blinking text issues.

To do so, simply specify

font-display: swap

inside your

@font-face

rule, like so:

@font-face {
  font-family: "Open Sans Regular";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");
  font-display: swap;
}

Note that currently only blink based browsers, such as chrome, support

font-display