Google PageSpeed - Eliminate Render-Blocking Resources Above the Fold caused from Google Fonts

Question

i'm trying to optimize this website: electronicsportsitalia-it and when i try to analyze it on Google PageSpeed the platforms says that there is a google font blocking the page rendering:

https://fonts.googleapis.com/css?family=Lato:300,400,700

The font firstly was loaded through php but then i inserted it directly in html code trying to load it with this code: <link rel=stylesheet id=avia-google-webfont href='//fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css' media=all lazyload> -put also before the </body> tag- but it didn't worked.

So i tryed to load it with Web Font Loader and actually the website is runnging this script: `

</script>
<script>
  WebFont.load({
    google: {
      families: ['Lato']
    }
  });
</script>`

but always the same problem on PageSpeed.

Can someone help me?

Answer 1

You can preload any styles (including google fonts)

<link
    rel="preload"
    href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
        rel="stylesheet"
        type="text/css"
    />
</noscript>

You can read more on web.dev

UPDATE

Base on Lucas Vazquez comment I've also added &display=swap (which fixes this issue "Ensure text remains visible during webfont load")