perf(font): serve inter var from public (#2403)

* perf(font): load Inter var from HTML, not JS

* perf(font): use font-display block

Prevents FOUT.

* perf(font): preload font

Further removes font from the critical render path.

public/index.html

@@ -26,15 +26,31 @@
 
     <link rel="preconnect" href="https://www.google-analytics.com/">
 
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin>
+
     <style>
         * {
             font-family: 'Inter', sans-serif;
             box-sizing: border-box;
         }
 
+        /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+        @font-face {
+            font-family: 'Inter custom';
+            font-weight: 100 900;
+            font-style: normal;
+            font-display: block;
+            font-named-instance: 'Regular';
+            src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2 supports variations(gvar)"),
+                url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2-variations"),
+                url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2");
+        }
+
         @supports (font-variation-settings: normal) {
             * {
-                font-family: 'Inter var', sans-serif;
+                font-family: 'Inter custom', sans-serif;
             }
         }
 
@@ -92,7 +108,7 @@
     <!-- The root is the container of the app -->
     <div id="root">
       <!-- Triggers the font to load immediately and then is replaced by the app -->
-      <div style="visibility: hidden">X</div>
+      <div>&emsp;</div>
     </div>
 
     <div id="background-radial-gradient"></div>