How to Load Google Fonts Asynchronously Without Render-Blocking CSS

Loading Google Fonts asynchronously is one of the best ways to speed up your website and eliminate the render-blocking CSS issue. In the past, developers often used the Web Font Loader JavaScript library for this purpose. However, modern browsers now support a faster and more efficient method that doesn't require extra JavaScript.

The latest approach uses the preconnect and preload tags combined with a smart onload handler and a noscript fallback. This ensures the font stylesheet is fetched early without delaying your page's render, improving both user experience and performance scores in tools like Google PageSpeed Insights and Lighthouse.

Add the following code just before the </head> tag of your website:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="YOUR_GOOGLE_FONTS_URL" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  <link rel="stylesheet" href="YOUR_GOOGLE_FONTS_URL">
</noscript>

Replace "YOUR_GOOGLE_FONTS_URL" with your actual Google Fonts URL. For example:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</noscript>

Here's how the code works:

• rel="preconnect" sets up early connections to Google's font servers for faster loading.
• rel="preload" fetches the stylesheet without applying it immediately, avoiding render-blocking.
• The onload event updates the rel to stylesheet after loading.
• <noscript> ensures font loading still works for users with JavaScript disabled.

This method loads Google Fonts efficiently, avoids layout shifts, and prevents invisible text issues by using display=swap.

How to generate your Google Fonts URL:

Go to fonts.google.com, select your desired font families and weights, and copy the generated embed link.

Tip: Use fewer font families and font weights to reduce page size and loading time.