🪟 🧹 Update Inter font to use variable fonts (#16926)

* Update Inter font styles to import variable version

* Rename regular SCSS font var to primary

* Remove non-standard css rule, add public to pre-commit linting

airbyte-webapp/package.json

@@ -144,7 +144,7 @@
     "src/**/*.{css,scss,md,json}": [
       "prettier --write"
     ],
-    "src/**/*.{css,scss}": [
+    "{public,src}/**/*.{css,scss}": [
       "stylelint --fix"
     ]
   },

airbyte-webapp/public/index.css

@@ -31,63 +31,25 @@ noscript {
     color: #1A1A21;
     font-size: 18px;
     line-height: 22px;
-    font-family: Inter, Arial, sans-serif;
+    font-family: Inter, Helvetica, Arial, sans-serif;
 }
 
-/* Regular Inter */
 @font-face {
-    font-family: "Inter";
-    src: url("/fonts/inter/Inter-Regular.eot"); /* IE9 Compat Modes */
-    src: local("Inter"),
-    url("/fonts/inter/Inter-Regular.eot?#iefix") format("embedded-opentype"),
-        /* IE6-IE8 */ url("/fonts/inter/Inter-Regular.woff2") format("woff2"),
-        /* Super Modern Browsers */ url("/fonts/inter/Inter-Regular.woff")
-    format("woff"),
-        /* Modern Browsers */ url("/fonts/inter/Inter-Regular.ttf")
-    format("truetype"),
-        /* Safari, Android, iOS */ url("/fonts/inter/Inter-Regular.svg#OpenSans")
-    format("svg"); /* Legacy iOS */
-
-    font-weight: normal;
-    font-style: normal;
-}
-
-/* Medium Inter */
-@font-face {
-    font-family: "Inter";
-    src: url("/fonts/inter/Inter-Medium.eot"); /* IE9 Compat Modes */
-    src: local("Inter"),
-    url("/fonts/inter/Inter-Medium.eot?#iefix") format("embedded-opentype"),
-        /* IE6-IE8 */ url("/fonts/inter/Inter-Medium.woff2") format("woff2"),
-        /* Super Modern Browsers */ url("/fonts/inter/Inter-Medium.woff")
-    format("woff"),
-        /* Modern Browsers */ url("/fonts/inter/Inter-Medium.ttf")
-    format("truetype"),
-        /* Safari, Android, iOS */ url("/fonts/inter/Inter-Medium.svg#OpenSans")
-    format("svg"); /* Legacy iOS */
-
-    font-weight: 500;
+    font-family: 'Inter';
+    font-weight: 100 900;
+    font-display: swap;
     font-style: normal;
+    src: url("/fonts/inter/Inter-roman.var.woff2?v=3.19") format("woff2");
 }
 
-/* Bold Inter */
 @font-face {
-    font-family: "Inter";
-    src: url("/fonts/inter/Inter-Bold.eot"); /* IE9 Compat Modes */
-    src: local("Inter"),
-    url("/fonts/inter/Inter-Bold.eot?#iefix") format("embedded-opentype"),
-        /* IE6-IE8 */ url("/fonts/inter/Inter-Bold.woff2") format("woff2"),
-        /* Super Modern Browsers */ url("/fonts/inter/Inter-Bold.woff")
-    format("woff"),
-        /* Modern Browsers */ url("/fonts/inter/Inter-Bold.ttf") format("truetype"),
-        /* Safari, Android, iOS */ url("/fonts/inter/Inter-Bold.svg#OpenSans")
-    format("svg"); /* Legacy iOS */
-
-    font-weight: bold;
-    font-style: normal;
+    font-family: 'Inter';
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: italic;
+    src: url("/fonts/inter/Inter-italic.var.woff2?v=3.19") format("woff2");
 }
 
-
 /* Regular Roboto Mono */
 @font-face {
     font-family: "Roboto Mono";

airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss

@@ -48,7 +48,7 @@
 }
 
 .number {
-  font-family: fonts.$regularFont;
+  font-family: fonts.$primary;
   font-style: normal;
   font-weight: 600;
   font-size: 10px;

airbyte-webapp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss

@@ -50,7 +50,7 @@
   .quote {
     margin: 0;
     color: colors.$white;
-    font-family: fonts.$regularFont;
+    font-family: fonts.$primary;
     font-weight: 400;
     font-size: 17px;
     line-height: 28px;
@@ -80,15 +80,15 @@
 
   .quoteAuthorFullName {
     color: colors.$white;
-    font-family: fonts.$regularFont;
+    font-family: fonts.$primary;
     font-weight: 500;
     font-size: 14px;
     margin-bottom: 0;
   }
 
   .quoteAuthorJobTitle {
     color: colors.$white;
-    font-family: fonts.$regularFont;
+    font-family: fonts.$primary;
     font-weight: 700;
     font-size: 18px;
     margin: 10px 0;

airbyte-webapp/src/scss/_fonts.scss

@@ -1,2 +1,2 @@
-$regularFont: Inter, Arial, sans-serif;
+$primary: Inter, Helvetica, Arial, sans-serif;
 $monospace: "Roboto Mono", Menlo, Monaco, Consolas, monospace;

airbyte-webapp/src/scss/export.module.scss

@@ -117,5 +117,5 @@
   transparentColor: colors.$transparentColor;
 
   // Fonts
-  regularFont: fonts.$regularFont;
+  regularFont: fonts.$primary;
 }