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 me¹.

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" 
         href="https://fonts.googleapis.com/css2?family=Inter&display=swap"  
         as="style" 
         onload="this.onload=null;this.rel='stylesheet'" />
   <noscript>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap" />
   </noscript>

2. Set display to swap on the Google font, i.e., make sure the font URL has display=swap tagged at the end.