Abhilash Meesala

Eliminate render-blocking by Google fonts

When I ran PageSpeed Insights on this site, I found that Google fonts were render-blocking.

There were a lot of solutions listed on the web. Here’s a summary of the solution that worked for me1.

You need to do two things to fix this.

  1. Defer loading the file. We do this by asynchronously loading the file and then marking it as a stylesheet once it’s completely loaded.
    <link rel="preload" 
          onload="this.onload=null;this.rel='stylesheet'" />
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap" />
  2. Set display to swap on the Google font, i.e., make sure the font URL has display=swap tagged at the end.


  1. Ref: Defer non-critical CSS