enhancement(web): improve font loading performance and avoid page reflow (#1087)

* enhancement: improve font loading performance and avoid page reflow

chore: get rid of postcss-import (we're not using it and it's not needed for tailwind)

* fix indent

web/index.html

@@ -11,6 +11,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#141415" />
     <meta name="description" content="autobrr" />
+    <link rel="preload" href="/Inter.var.woff2" as="font" type="font/woff2" crossorigin="use-credentials">
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="apple-touch-icon" href="/apple-touch-icon-iphone-60x60.png" />
     <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-ipad-76x76.png" />
@@ -18,6 +19,27 @@
     <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-ipad-retina-152x152.png" />
     <title>autobrr</title>
     <base href="{{.BaseUrl}}">
+    <style>
+@font-face {
+  font-family: "Inter Var";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: block;
+  src:
+    local("Inter Var"), local("Inter Variable"),
+    local("Inter var"), local("Inter variable"),
+    local("InterVar"), local("InterVariable"),
+    local("Inter"),
+    url("/Inter.var.woff2") format("woff2");
+}
+:root {
+  font-family: "Inter Var", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+    </style>
     <script>
       window.APP = {};
       window.APP.baseUrl = "{{.BaseUrl}}";