Speed Up Font Loading and Eliminate Blink

Take advantage of the CSS font-display Property

CSS,Web Performance,Fonts


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
property, we can speed up font loading while simultaneously eliminating the blinking text issues.
To do so, simply specify
font-display: swap
inside your
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