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

24degrees development started

So. After some years of teaching, we’re back. Today is the first day of studying WordPress development. And although I’m not new to it: I do love to freshen up stuff and play the game strict.

Hosting and developing for WordPress always had this special place in my hart. And mind. So I’m glad to get things going again.

Let’s get ready for the next major release of WordPress: version 6 by getting through everything we knew: hosting, multisite, themes and plugins. That’s the first part.

3, 2, 1… GO!