My relation with Google Fonts always was a relationship of love and hate: very thankful for having so much possibilities. On the other hand, it always prevented a page from loading the right way, it never felt good.
But it seems those days are over: thanks to this post there’s a better way of loading Google Fonts in your theme: it takes care of the render blocking issue.
The code
<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>Read all about it
However, the answer in the code block above is not all there is to it. Make sure to read the comments. As far as I’m concerned, I still need to read about the following statement:
Well, i had to change rel preload to prefetch because of a console warning: The resource … was preloaded using link preload but not used within a few seconds from the window's load event”?\