diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 14090ad072..b77053f843 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -159,7 +159,7 @@ module.exports = {
       'link',
       {
         href:
-          'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono&display=swap',
+          'https://fonts.googleapis.com/css?family=Inter:300,400,600|Open+Sans:400,600;display=swap',
         rel: 'stylesheet'
       }
     ],
diff --git a/src/.vuepress/theme/components/Home.vue b/src/.vuepress/theme/components/Home.vue
index 551850caf1..926abb7a24 100644
--- a/src/.vuepress/theme/components/Home.vue
+++ b/src/.vuepress/theme/components/Home.vue
@@ -143,6 +143,10 @@ export default {
 <style lang="scss">
 @import '@theme/styles/_settings.scss';
 
+.home {
+  font-family: $fontHome;
+}
+
 .hero {
   padding: calc(100px + 3rem) 40px 30px; // add $betaBannerHeight
 
diff --git a/src/.vuepress/theme/styles/_settings.scss b/src/.vuepress/theme/styles/_settings.scss
index 33f1a5e5a5..c0052ee8e8 100644
--- a/src/.vuepress/theme/styles/_settings.scss
+++ b/src/.vuepress/theme/styles/_settings.scss
@@ -12,3 +12,6 @@ $info: #1c90f3;
 $MQNarrow: 959px;
 $MQMobile: 719px;
 $MQMobileNarrow: 419px;
+
+$fontHome: 'Open Sans', 'Inter', Roboto, Oxygen, Fira Sans, Helvetica Neue,
+  sans-serif;
diff --git a/src/.vuepress/theme/styles/config.styl b/src/.vuepress/theme/styles/config.styl
index d2956bd6cf..59992f83bf 100644
--- a/src/.vuepress/theme/styles/config.styl
+++ b/src/.vuepress/theme/styles/config.styl
@@ -1,3 +1,3 @@
 $contentClass = '.theme-default-content'
-$fontPrimary = 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
+$fontPrimary = 'Inter', Roboto, Oxygen, Fira Sans,Helvetica Neue, sans-serif;
 $betaBannerHeight = 3rem