@bassam, thanks, I’ll try it out.
The blocking font loading that you currently use now prevents not only the rendering of the website, but also the assembly of DOM/CSSOM and rendering will not occur until the font is loading either.
When you use async font loading, the DOM/CSSOM are actually built and layouts can be computed for some of the elements. With visibility set to false WHILE the fonts are loading you’re only preventing the FOUT, not the actual DOM/CSSOM processing, which may result in faster rendering in the end.
That’s why Google penalizes synchronous font loading that you have and doesn’t penalize the WebFont one.