diff --git a/package.json b/package.json
index 9ce87cfd..a77e111a 100644
--- a/package.json
+++ b/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",
diff --git a/src/fonts/hinted-subset-HaasGrotDispR-55Roman.woff b/src/fonts/hinted-subset-HaasGrotDispR-55Roman.woff
deleted file mode 100644
index dcbfaecb..00000000
Binary files a/src/fonts/hinted-subset-HaasGrotDispR-55Roman.woff and /dev/null differ
diff --git a/src/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2 b/src/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2
deleted file mode 100644
index 6670f1e3..00000000
Binary files a/src/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2 and /dev/null differ
diff --git a/src/fonts/hinted-subset-HaasGrotDispR-65Medium.woff b/src/fonts/hinted-subset-HaasGrotDispR-65Medium.woff
deleted file mode 100644
index 40282000..00000000
Binary files a/src/fonts/hinted-subset-HaasGrotDispR-65Medium.woff and /dev/null differ
diff --git a/src/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2 b/src/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2
deleted file mode 100644
index 4e1d8e70..00000000
Binary files a/src/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2 and /dev/null differ
diff --git a/src/fonts/hinted-subset-HaasGrotTextR-55Roman.woff b/src/fonts/hinted-subset-HaasGrotTextR-55Roman.woff
deleted file mode 100644
index 394db4ed..00000000
Binary files a/src/fonts/hinted-subset-HaasGrotTextR-55Roman.woff and /dev/null differ
diff --git a/src/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2 b/src/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2
deleted file mode 100644
index bb3e7893..00000000
Binary files a/src/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2 and /dev/null differ
diff --git a/src/fonts/hinted-subset-HaasGrotTextR-65Medium.woff b/src/fonts/hinted-subset-HaasGrotTextR-65Medium.woff
deleted file mode 100644
index 1410b9f7..00000000
Binary files a/src/fonts/hinted-subset-HaasGrotTextR-65Medium.woff and /dev/null differ
diff --git a/src/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2 b/src/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2
deleted file mode 100644
index 7887c1fc..00000000
Binary files a/src/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2 and /dev/null differ
diff --git a/src/fonts/hinted-subset-HaasGrotTextR-75Bold.woff b/src/fonts/hinted-subset-HaasGrotTextR-75Bold.woff
deleted file mode 100644
index f9682a2e..00000000
Binary files a/src/fonts/hinted-subset-HaasGrotTextR-75Bold.woff and /dev/null differ
diff --git a/src/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2 b/src/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2
deleted file mode 100644
index d48b1459..00000000
Binary files a/src/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2 and /dev/null differ
diff --git a/src/global.scss b/src/global.scss
index fb692845..104c0003 100644
--- a/src/global.scss
+++ b/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;
diff --git a/src/pages/index.js b/src/pages/index.js
index f45be631..c13c9885 100644
--- a/src/pages/index.js
+++ b/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(
diff --git a/src/variables.scss b/src/variables.scss
index 2373d2b9..3acc8146 100644
--- a/src/variables.scss
+++ b/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;
diff --git a/yarn.lock b/yarn.lock
index 165702c2..18eebe5c 100644
--- a/yarn.lock
+++ b/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"