How to make google fonts to load faster on a webpage

Why should we consider google font API to load faster in the website ?

Every one will be wondering why should we even bother about loading the google api faster as google font’s are hosted on a much fast and reliable CDN itself, let me help you out guys which helped me to increase the page speed while i was working on the project.

some of the few steps it will lead to much faster page performance.

a) Keep only the required font variants rather then selecting all.
b) go with a self hosted font with the help from “google-webfonts-helper”

This is the standard way / approach which google fonts will provide us to add in the html.

<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap" rel=”stylesheet”>

The above link sounds like adding a stylesheet isn't it? if we open the link path in the new browser window we will see that there will be lots of @font-face within which it has font-weight, font-style and related stuff, just imagine calling a single font which probably has a 4 line of code, but instead we are getting thousands line of codes which is not required to us, which will impact the page performance.

Plus on top of these every time the page is being opened it triggers 2 calls -

1. the one which we have added in the html — “fonts.googleapis.com” &
2. the second will internally trigger one more callback from this API.
   https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

So Let’s Fix this

1. Always add a preconnect to the google host and dont forget to add crossorigin — as this plays a very important role
   <link rel=”preconnect” href=”https://fonts.gstatic.com/" crossorigin>
   <link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap" rel=”stylesheet”>