diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js
index 55432799..59fe5fd3 100644
--- a/ui/src/components/base/index.js
+++ b/ui/src/components/base/index.js
@@ -13,12 +13,19 @@ const {
 } = Styled;
 
 module.exports = styled.div`
-  font-family: -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #373A3C;
-  background-color: #FFFFFF;
+  @font-face {
+    font-family: 'LibreFranklin';
+    src: url('../../shared/fonts/LibreFranklin.ttf')  format('truetype')
+  }
+
+  & * {
+    font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
+      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #373A3C;
+    background-color: #FFFFFF;
+  }
 
   /**************************************************************************
    *                              NORMALIZE.CSS                             *
diff --git a/ui/src/shared/fonts/LibreFranklin.ttf b/ui/src/shared/fonts/LibreFranklin.ttf
new file mode 100644
index 00000000..05e5064f
Binary files /dev/null and b/ui/src/shared/fonts/LibreFranklin.ttf differ