Speed Up Font Loading and Eliminate Blink

Take advantage of the CSS font-display Property

CSS,Web Performance,Fonts

09/08/2016

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