Ensure text remains visible during webfont load

Thank you once again for the wonderful theme

Please I’m getting the performance improvement notice “Ensure text remains visible during webfont load” on my blog: mediahype.com.ng, using the Google page speed insight.

So I checked online for the solutions

One of the suggestions I saw was to include the @font-face font-display property and set the attribute to swap

I could not find where the face font was implemented for the font that I am using – Google Roboto, Latin-Ext.

I opened my style.css, I saw where the font-face properties were declared for the locally hosted font. I added the font-display property to it and set the attribute to swap, then changed my font to the locally hosted font – Titillium Web, Latin. And it worked – the message “Ensure text remains visible during webfont load” stopped to display.

So the summary of the whole thing is that I don’t really like the locally hosted font Titillium Web, Latin.

I will be glad if there is way to implement the font display property with the swap attribute, so that font will be visible when the webfont has not yet loaded. Then switch to the webfont when it has loaded.

Thanks in advance