diff --git a/webui-src/app/scss/base/_reset.scss b/webui-src/app/scss/base/_reset.scss
index d8d69c8..7649050 100644
--- a/webui-src/app/scss/base/_reset.scss
+++ b/webui-src/app/scss/base/_reset.scss
@@ -42,7 +42,7 @@ html:focus-within {
 body {
   text-rendering: optimizeSpeed;
   line-height: 1.5;
-  font-family: Arial, Helvetica, sans-serif !important;
+  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
 }
 
 /* A elements that don't have a class get default styles */
diff --git a/webui-src/index.html b/webui-src/index.html
index a232168..073dde3 100644
--- a/webui-src/index.html
+++ b/webui-src/index.html
@@ -1,11 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>RetroShare</title>
+    <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:wght@300;400;500;700&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="styles.css" />
     <link href="images/retroshare.svg" rel="icon" data-n-head="true" type="image/svg" />
+    <title>RetroShare</title>
     <script src="app.js"></script>
   </head>
 
