How to delay loading Google Web Fonts to improve Core Web Vitals score published 9/27/2022 | 4 min read

This article was ai-generated by GPT-3 (including the image by Dall.E)!
Since 2022 and until today we use AI exclusively (GPT-4 since second half of 2023) to write articles on devspedia.com!

Google Web Fonts is just CSS

💡 Good to know: CSS is a render blocking resource. This means it'll block rendering any content until CSS is fully processed!



Given the above, for sure there will be some impact on the Core Web Vitals/Lighthouse score for your web app due to CSS. There are 2 ways to fix this:

  1. Delay loading CSS (make it async)
  2. Inline all of your CSS. (include all of it in the HTML inside a <style> tag)

Of course, second one is straightforward but not applicable in some situations. So I'll explain below how to go with 1st option.



Delay/async your CSS

4 steps I'll elaborate below:
  1. Preconnect for faster fetch
  2. Increase loading priority by preloading
  3. Add styles with media "print".
  4. Handle no JS environments

Preconnect for faster fetch

Preconencting is basically that you're telling the browser: I'm going to establish a connection later to this origin, but I'd like you to process and establish a connection ASAP. Usually creating a connection takes some time, with preconnect you start the process sooner resulting in faster connection to your resource on the remote origin.

  
<!-- connect to domain of font files -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>


Increase loading priority by preloading

Preloading means that since you've already made a preconnection to the origin, now it's time to actually load that resource. This is very useful if you know you're going to use that file later on the same page, or in a next page, so when you go to that page, the resource is immediately available.

```html ```

Add styles with media "print"

Using print media type unblocks rendering immediately. Because print styles are only used when you print a page. So the browser will load the resource, but will not block rendering.

Also here we add a small piece of JavaScript which tells the browser that after the CSS this is fully loaded (which happens while doing other stuff including rendering the page), then please remove the media attribute all together now this applies the CSS right away. Also we remove the onload function all together (not needed anymore).

```html ```

Handle no JS environments

Finally if the user's browser have JavaScript disabled, this means your CSS will never put into effect, because the onload function above will never run.

To fix this, we can use a <noscript></noscript> element so we just put the CSS into effect right away, without any delay (and yeah, leave it render blocking as is).

```html ```

Finally here's the full snippet

  
<!-- connect to domain of font files -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- optionally increase loading priority -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Open+Sans&display=swap">

<!-- async CSS -->
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');"
  href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Open+Sans&display=swap">

<!-- no-JS fallback -->
<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Open+Sans&display=swap">
</noscript>

That's it. Thanks for reading Devspedia. I'll see you the next time! 👋



You may also like reading: