Google Fonts Screenshot

Render Blocking Google Fonts

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

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.