What it means?

Chrome, Safari, Firefox and Opera browsers hide the web page text while the font-files (in which the text has to be displayed) are being downloaded. Font-files can be large and often take longer to load. As a result, the web page can appear without text for a considerable duration. An alternative to this experience is to show the web page text in the device's default fonts while the font-files are being downloaded. Once downloaded, the font for the displayed text is changed.

A benefit of the later approach is that the user gets engaged with the page content a lot earlier.

Option 1 : Display text immediately via font-display

With font-display descriptor, we can tell the browser when the text should be displayed. Our recommended value for the descriptor is 'swap'. It tells the browser to display the text using system fonts immediately and change the font to our custom font once it is downloaded. This descriptor needs to be added to the @font-face as exhibited below:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(./roboto.woff2) format('woff2');
}

If you are using Google Fonts, you can resolve this by:

• Appending "&display=swap" to your <link >
• Set link tag to load at lower priority via media attribute.

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+HK&display=swap" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;" > 

Option 2 : Display text immediately via Font Face Observer

Font Face Observer is a JavaScript library that monitors and notifies when the web font is loaded. This notification can be used to setup text display behavior like in Option #1.

Step 1 : Download the Font Face Observer library from here and add it to your page:

<script src="fontfaceobserver.standalone.js"></script>

Step 2 : Load your font files exactly like you did earlier. For example:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Step 3 : Within your CSS, change the way you assign font-family for your page elements as shown below:

/**earlier**/
.mySpecialContent
{
	font-family: Roboto, sans-serif;
}

/**changed for Font Face Observer**/
.mySpecialContent
{
	font-family: sans-serif;
}
.mySpecialContent.fonts-loaded
{
	font-family: Roboto, sans-serif;
}

Step 4 : Add the following JavaScript to your web page to monitor and handle font loading. For example:

<script>
var fRoboto = new FontFaceObserver("Roboto");
fRoboto.load().then(function () {
	var x = document.getElementsByClassName("mySpecialContent");
	for (i = 0; i < x.length; i++) {
 	 x[i].className += " fonts-loaded";
	} 
  	document.getElementById("myElement").className += " fonts-loaded";
});
</script>

While the Font face observer method provides a better cross-browser support, it will not work in case if the visitors' browser has JavaScript disabled.

About the Author

Punit Sethi has been working with large e-Commerce & B2C websites on improving their site speed, scalability and frontend architecture. He tweets on these topics here.