Speed Up Font Loading and Eliminate Blink
Take advantage of the CSS font-display Property
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