use Metropolis typeface

package.json

@@ -33,7 +33,8 @@
     "react-reveal": "^1.2.2",
     "react-syntax-highlighter": "^12.2.1",
     "react-visibility-sensor": "^5.1.1",
-    "skynet-js": "^0.0.6"
+    "skynet-js": "^0.0.6",
+    "typeface-metropolis": "^0.0.74"
   },
   "devDependencies": {
     "cypress": "^4.8.0",

src/global.scss

@@ -1,50 +1,5 @@
 @import "./variables.scss";
 
-@font-face {
-  font-family: "Haas Grot Disp";
-  src: url("./fonts/hinted-subset-HaasGrotDispR-55Roman.woff2") format("woff2"),
-    url("./fonts/hinted-subset-HaasGrotDispR-55Roman.woff") format("woff");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Haas Grot Disp";
-  src: url("./fonts/hinted-subset-HaasGrotDispR-65Medium.woff2") format("woff2"),
-    url("./fonts/hinted-subset-HaasGrotDispR-65Medium.woff") format("woff");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Haas Grot Text";
-  src: url("./fonts/hinted-subset-HaasGrotTextR-75Bold.woff2") format("woff2"),
-    url("./fonts/hinted-subset-HaasGrotTextR-75Bold.woff") format("woff");
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Haas Grot Text";
-  src: url("./fonts/hinted-subset-HaasGrotTextR-65Medium.woff2") format("woff2"),
-    url("./fonts/hinted-subset-HaasGrotTextR-65Medium.woff") format("woff");
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Haas Grot Text";
-  src: url("./fonts/hinted-subset-HaasGrotTextR-55Roman.woff2") format("woff2"),
-    url("./fonts/hinted-subset-HaasGrotTextR-55Roman.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
 * {
   margin: 0;
   padding: 0;

src/pages/index.js

@@ -4,6 +4,7 @@ import SEO from "../components/seo";
 import { App } from "../components";
 import "../global.scss";
 import AppContext from "../AppContext";
+import "typeface-metropolis"; // import Metropolis typeface
 
 export default function IndexPage({ location }) {
   const context = useMemo(

src/variables.scss

@@ -31,8 +31,8 @@ $lightGray: #969a97;
 $red: #e65c5c;
 
 // fonts
-$font: "Haas Grot Text", Helvetica, Arial, Sans-Serif;
-$font2: "Haas Grot Disp", Helvetica, Arial, Sans-Serif;
+$font: "Metropolis", Helvetica, Arial, Sans-Serif;
+$font2: "Metropolis", Helvetica, Arial, Sans-Serif;
 
 // Breakpoints
 $tinybp: 374px;

yarn.lock

@@ -15155,6 +15155,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typeface-metropolis@^0.0.74:
+  version "0.0.74"
+  resolved "https://registry.yarnpkg.com/typeface-metropolis/-/typeface-metropolis-0.0.74.tgz#4201ff1e3b86f55825eed53662c49dff54c461f3"
+  integrity sha512-8qJnWwD5GkFqoNkv0t068jXziJHoIayq7dNl9a0BRy30/VznqmEgrQWkMDG8KxH2hRXXAWZfayXM9L6sZEkaaw==
+
 typescript@^3.9.3:
   version "3.9.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.3.tgz#d3ac8883a97c26139e42df5e93eeece33d610b8a"