diff --git a/public/index.html b/public/index.html
index ae1b046e..d3c8d677 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
 
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss
index eab65544..26aec47e 100644
--- a/public/scss/hop-styling.scss
+++ b/public/scss/hop-styling.scss
@@ -4,7 +4,7 @@
 /* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
 @import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
 body {
-    font-family: Urbanist, Arial, Helvetica, sans-serif;
+    font-family: Urbanist, Roboto, Arial, sans-serif;
     font-weight: 400;
     color: #000;
     margin: 0;
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 2d78a6dc..e0db0d3e 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -117,11 +117,10 @@ $theme-colors: (
 $body-color: $gray-600;
 
 //Fonts
-$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
 // stylelint-enable value-keyword-case
-$font-family-base: $font-family-sans-serif;
+$font-family-base:  UrbanistRegular, Roboto, Arial, sans-serif;
 $font-family-code: $font-family-monospace;
 $font-size-base: 1rem; // Assumes the browser default, typically `16px`