Fix: Preload fonts to improve performance

public/index.html

@@ -32,33 +32,117 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
 
     <!-- Primary Meta Tags -->
     <title>COVID-19 Tracker | India</title>
-    <meta name="title" content="COVID-19 Tracker | India">
-    <meta name="description" content="Volunteer-driven crowdsourced initiative to track the spread of Coronavirus (COVID-19) in India">
-    <meta name="keywords" content="coronavirus,corona,covid,covid19,covid-19,covidindia,india,virus">
+    <meta name="title" content="COVID-19 Tracker | India" />
+    <meta
+      name="description"
+      content="Volunteer-driven crowdsourced initiative to track the spread of Coronavirus (COVID-19) in India"
+    />
+    <meta
+      name="keywords"
+      content="coronavirus,corona,covid,covid19,covid-19,covidindia,india,virus"
+    />
+
+    <!-- Font Preloading -->
+    <!-- Only 3 added because only these 3 are being used. Thin, Regular and Light fonts should be added as needed -->
+    <link
+      rel="preload"
+      importance="low"
+      href="./fonts/Archia/archia-semibold-webfont.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      importance="low"
+      href="./fonts/Archia/archia-medium-webfont.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      importance="low"
+      href="./fonts/Archia/archia-bold-webfont.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
+    <style>
+      /* font-face declarations for preloaded fonts */
+      /* These are the only 3 fonts being used. 
+      font-face declarations for thin, regular and light fonts should be added as needed */
+      @font-face {
+        font-family: 'Archia';
+        src: url('./fonts/Archia/archia-semibold-webfont.eot');
+        src: local('Archia'),
+          url('./fonts/Archia/archia-semibold-webfont.eot?#iefix')
+            format('embedded-opentype'),
+          url('./fonts/Archia/archia-semibold-webfont.woff2') format('woff2'),
+          url('./fonts/Archia/archia-semibold-webfont.woff') format('woff'),
+          url('./fonts/Archia/archia-semibold-webfont.ttf') format('truetype');
+        font-weight: 600;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'Archia';
+        src: url('./fonts/Archia/archia-medium-webfont.eot');
+        src: local('Archia'),
+          url('./fonts/Archia/archia-medium-webfont.eot?#iefix')
+            format('embedded-opentype'),
+          url('./fonts/Archia/archia-medium-webfont.woff2') format('woff2'),
+          url('./fonts/Archia/archia-medium-webfont.woff') format('woff'),
+          url('./fonts/Archia/archia-medium-webfont.ttf') format('truetype');
+        font-weight: 400;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'Archia';
+        src: url('./fonts/Archia/archia-bold-webfont.eot');
+        src: local('Archia'),
+          url('./fonts/Archia/archia-bold-webfont.eot?#iefix')
+            format('embedded-opentype'),
+          url('./fonts/Archia/archia-bold-webfont.woff2') format('woff2'),
+          url('./fonts/Archia/archia-bold-webfont.woff') format('woff'),
+          url('./fonts/Archia/archia-bold-webfont.ttf') format('truetype');
+        font-weight: 900;
+        font-style: normal;
+        font-display: swap;
+      }
+    </style>
 
     <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://www.covid19india.org">
-    <meta property="og:title" content="COVID-19 Tracker | India">
-    <meta property="og:description" content="Volunteer-driven crowdsourced initiative to track the spread of Coronavirus (COVID-19) in India">
-    <meta property="og:image" content="/icon.png">
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://www.covid19india.org" />
+    <meta property="og:title" content="COVID-19 Tracker | India" />
+    <meta
+      property="og:description"
+      content="Volunteer-driven crowdsourced initiative to track the spread of Coronavirus (COVID-19) in India"
+    />
+    <meta property="og:image" content="/icon.png" />
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:width" content="512" />
     <meta property="og:image:height" content="512" />
 
     <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image">
-    <meta property="twitter:url" content="https://www.covid19india.org">
-    <meta property="twitter:title" content="COVID-19 Tracker | India">
-    <meta property="twitter:description" content="Volunteer-driven crowdsourced initiative to track the spread of Coronavirus (COVID-19) in India">
-    <meta property="twitter:image" content="/icon.png">
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://www.covid19india.org" />
+    <meta property="twitter:title" content="COVID-19 Tracker | India" />
+    <meta
+      property="twitter:description"
+      content="Volunteer-driven crowdsourced initiative to track the spread of Coronavirus (COVID-19) in India"
+    />
+    <meta property="twitter:image" content="/icon.png" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -76,10 +160,15 @@
     -->
   </body>
   <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-160698988-1"></script>
+  <script
+    async
+    src="https://www.googletagmanager.com/gtag/js?id=UA-160698988-1"
+  ></script>
   <script>
     window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+    function gtag() {
+      dataLayer.push(arguments);
+    }
     gtag('js', new Date());
     gtag('config', 'UA-160698988-1');
   </script>

src/App.scss

@@ -1,75 +1,3 @@
-@font-face {
-  font-family: 'Archia';
-  src: url('fonts/Archia/archia-thin-webfont.eot');
-  src:
-    url('fonts/Archia/archia-thin-webfont.eot?#iefix') format('embedded-opentype'),
-    url('fonts/Archia/archia-thin-webfont.woff2') format('woff2'),
-    url('fonts/Archia/archia-thin-webfont.woff') format('woff'),
-    url('fonts/Archia/archia-thin-webfont.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Archia';
-  src: url('fonts/Archia/archia-light-webfont.eot');
-  src:
-    url('fonts/Archia/archia-light-webfont.eot?#iefix') format('embedded-opentype'),
-    url('fonts/Archia/archia-light-webfont.woff2') format('woff2'),
-    url('fonts/Archia/archia-light-webfont.woff') format('woff'),
-    url('fonts/Archia/archia-light-webfont.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Archia';
-  src: url('fonts/Archia/archia-regular-webfont.eot');
-  src:
-    url('fonts/Archia/archia-regular-webfont.eot?#iefix') format('embedded-opentype'),
-    url('fonts/Archia/archia-regular-webfont.woff2') format('woff2'),
-    url('fonts/Archia/archia-regular-webfont.woff') format('woff'),
-    url('fonts/Archia/archia-regular-webfont.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Archia';
-  src: url('fonts/Archia/archia-medium-webfont.eot');
-  src:
-    url('fonts/Archia/archia-medium-webfont.eot?#iefix') format('embedded-opentype'),
-    url('fonts/Archia/archia-medium-webfont.woff2') format('woff2'),
-    url('fonts/Archia/archia-medium-webfont.woff') format('woff'),
-    url('fonts/Archia/archia-medium-webfont.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Archia';
-  src: url('fonts/Archia/archia-semibold-webfont.eot');
-  src:
-    url('fonts/Archia/archia-semibold-webfont.eot?#iefix') format('embedded-opentype'),
-    url('fonts/Archia/archia-semibold-webfont.woff2') format('woff2'),
-    url('fonts/Archia/archia-semibold-webfont.woff') format('woff'),
-    url('fonts/Archia/archia-semibold-webfont.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Archia';
-  src: url('fonts/Archia/archia-bold-webfont.eot');
-  src:
-    url('fonts/Archia/archia-bold-webfont.eot?#iefix') format('embedded-opentype'),
-    url('fonts/Archia/archia-bold-webfont.woff2') format('woff2'),
-    url('fonts/Archia/archia-bold-webfont.woff') format('woff'),
-    url('fonts/Archia/archia-bold-webfont.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
-}
-
 /* Color Pallete */
 
 $blue: #007bff;