html – Is declaring @font-face rule in head tag good way to improve speed loading of the webpage? Inlined font loading or self-hosting?-ThrowExceptions

Exception or error:

I am trying to optimalize my webpage (made with React) first load time where I use Google Fonts and I tried two ways of font loading. First was the inlined Google Font loading where I put @font-face rules inside of the style tags in head of html document. Then I tried the second option to self host my fonts so I downloaded them to my project and put @font-fase rules into the scss files. Surprisingly, I’ve noticed better performance using first option and I am litte bit confused because urls dircet to google servers and in second option they direct to folders where fonts are already downloaded so theorethically second option should be faster or maybe I’m missing something.

First option:

<!DOCTYPE html>
<html lang="en">   
<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />  
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <style>
    /* latin */
    @font-face {
      font-family: 'Caveat';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v7/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* latin-ext */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

  </style>
  <title>Title</title>
</head>  
<body>
  {...}
</body>    
</html>

Second option example for specific scss file:

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('../fonts/montserrat-v14-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/montserrat-v14-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Each of them works fine but I’m wondering why first option’s performance is better and if it is good practice to load fonts this way in production build? I base on PageSpeed Insights results.

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *