Ensure text remains visible during webfont load

I have found a way, and you can do this by yourself:

open the link from your google font in browser and copy all of this:
/* Example */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Next Step
Create a new CSS file with text editor and paste the copied font files in there.
Next write after font-family this:
/* Example */

font-display:block;

Next Step
Save file and load in your Theme CSS Folder and import the created file into your style CSS with this way

@import url('css/myfont.css'); 

Next Step
remove your old google font links from your theme.

Thats all, your be done and PageSpeed will show you no more a message to this.

@riccosgd , much appreciated your help!!
I haven’t performed your solution yet as I’m still waiting response from theme owner too.

I have used CAOS for Webfonts plugin with option “swap” and did also the trick

Hi all,

Interestingly, Phast should already add font-display: swap to all webfonts in order to fix this issue. It seems that for some reason it didn’t/doesn’t work in your case.

I’m going to mark this as resolved for now, should you run into the same issue in future, please let me know and I’ll find out why it isn’t working.

–Albert