Load Google Fonts faster

257



In this post, we will see how to load Google web fonts faster

Go to Google fonts and pick the font you liked and copy the embed URL of it.

For this tutorial, I'll be using Inter font

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap" rel="stylesheet">

Inorder to load the fonts faster we need to preconnect to the origin first,

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

Next, we tell the browser to load the CSS asynchronously with the print

<link  rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap"  media="print"  onload="this.media='all'"  />

Next, we will make it a high priority

<link rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap"
       />

At last, we tell the browser to load CSS when JavaScript is disabled

<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap" />
</noscript>

Final code,

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />
      
<link rel="stylesheet"
      href="$https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap"
      media="print" onload="this.media='all'" />

<link rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap" />

<noscript>
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap" />
</noscript>