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.
<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”?\