Ensure Text Remains Visible During Webfont Load


Avoid hiding text while font-files are downloaded. Instead, show content to users immediately using a system font.






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’);
}

This approach has two limitations:

  • Some browsers (like IE, Edge, Opera Mini) do not support the font-display descriptor. As of May 2019, nearly 82% of visitors’ browsers support it. So, if you are looking for a solution that works for 100% of your visitors, you will have to implement a different approach.
  • This approach cannot work with Google Fonts. This is so because Google serves the @font-face CSS for Google Fonts. However, this can be overcome via an approach detailed here.


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.




Let us improve your website speed?

Let us take care of your website's performance. Contact us for our performance optimization services.