diff --git a/assets/stylesheets/fonts.css b/assets/stylesheets/fonts.css
new file mode 100755
index 0000000..83de58f
--- /dev/null
+++ b/assets/stylesheets/fonts.css
@@ -0,0 +1,48 @@
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-regular-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-italic-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-bold-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-bold-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-bolditalic-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'robotomedium';
+    src: url('/fonts/roboto-medium-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-medium-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'robotomedium';
+    src: url('/fonts/roboto-mediumitalic-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-mediumitalic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
diff --git a/assets/stylesheets/global.css b/assets/stylesheets/global.css
index b0d899f..ffa87de 100644
--- a/assets/stylesheets/global.css
+++ b/assets/stylesheets/global.css
@@ -1,7 +1,7 @@
 body {
   background-color: var(--color-bg-default);
   color: var(--color-text-default);
-  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-family: var(--font-regular);
   font-size: 1rem;
   line-height: var(--line-height);
 }
diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
index 19187a1..413651e 100644
--- a/assets/stylesheets/style.css
+++ b/assets/stylesheets/style.css
@@ -1,6 +1,7 @@
 @import 'normalize.css';
 
 @import './variables';
+@import './fonts';
 
 @import './typography';
 @import './formhack';
diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css
index 9d5492f..0b8c899 100644
--- a/assets/stylesheets/variables.css
+++ b/assets/stylesheets/variables.css
@@ -7,6 +7,9 @@
 
   --line-height: 1.5em;
 
+  --font-regular: 'roboto', Helvetica, sans-serif;
+  --font-light: 'robotomedium', Helvetica, sans-serif;
+
   --color-palette-blue: #5c9fef;
 
   --color-text-default: #2a303a;
diff --git a/public/fonts/roboto-bold-webfont.woff b/public/fonts/roboto-bold-webfont.woff
new file mode 100755
index 0000000..98c3a53
Binary files /dev/null and b/public/fonts/roboto-bold-webfont.woff differ
diff --git a/public/fonts/roboto-bold-webfont.woff2 b/public/fonts/roboto-bold-webfont.woff2
new file mode 100755
index 0000000..d153f0a
Binary files /dev/null and b/public/fonts/roboto-bold-webfont.woff2 differ
diff --git a/public/fonts/roboto-bolditalic-webfont.woff b/public/fonts/roboto-bolditalic-webfont.woff
new file mode 100755
index 0000000..4038c3e
Binary files /dev/null and b/public/fonts/roboto-bolditalic-webfont.woff differ
diff --git a/public/fonts/roboto-bolditalic-webfont.woff2 b/public/fonts/roboto-bolditalic-webfont.woff2
new file mode 100755
index 0000000..c3af623
Binary files /dev/null and b/public/fonts/roboto-bolditalic-webfont.woff2 differ
diff --git a/public/fonts/roboto-italic-webfont.woff b/public/fonts/roboto-italic-webfont.woff
new file mode 100755
index 0000000..75b7ba3
Binary files /dev/null and b/public/fonts/roboto-italic-webfont.woff differ
diff --git a/public/fonts/roboto-italic-webfont.woff2 b/public/fonts/roboto-italic-webfont.woff2
new file mode 100755
index 0000000..194f2ca
Binary files /dev/null and b/public/fonts/roboto-italic-webfont.woff2 differ
diff --git a/public/fonts/roboto-medium-webfont.woff b/public/fonts/roboto-medium-webfont.woff
new file mode 100755
index 0000000..8334a7d
Binary files /dev/null and b/public/fonts/roboto-medium-webfont.woff differ
diff --git a/public/fonts/roboto-medium-webfont.woff2 b/public/fonts/roboto-medium-webfont.woff2
new file mode 100755
index 0000000..3ecd5b7
Binary files /dev/null and b/public/fonts/roboto-medium-webfont.woff2 differ
diff --git a/public/fonts/roboto-mediumitalic-webfont.woff b/public/fonts/roboto-mediumitalic-webfont.woff
new file mode 100755
index 0000000..c57e23c
Binary files /dev/null and b/public/fonts/roboto-mediumitalic-webfont.woff differ
diff --git a/public/fonts/roboto-mediumitalic-webfont.woff2 b/public/fonts/roboto-mediumitalic-webfont.woff2
new file mode 100755
index 0000000..bb8f8e3
Binary files /dev/null and b/public/fonts/roboto-mediumitalic-webfont.woff2 differ
diff --git a/public/fonts/roboto-regular-webfont.woff b/public/fonts/roboto-regular-webfont.woff
new file mode 100755
index 0000000..92495c1
Binary files /dev/null and b/public/fonts/roboto-regular-webfont.woff differ
diff --git a/public/fonts/roboto-regular-webfont.woff2 b/public/fonts/roboto-regular-webfont.woff2
new file mode 100755
index 0000000..e8a42ba
Binary files /dev/null and b/public/fonts/roboto-regular-webfont.woff2 differ
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 781a5c8..af6d375 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -450,6 +450,54 @@ template {
   display: none;
 }
 
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-regular-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-italic-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-bold-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-bold-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-bolditalic-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'robotomedium';
+    src: url('/fonts/roboto-medium-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-medium-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'robotomedium';
+    src: url('/fonts/roboto-mediumitalic-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-mediumitalic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
 h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
   margin-top: 0;
 }
@@ -810,7 +858,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 body {
   background-color: #fff;
   color: #2a303a;
-  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-family: 'roboto', Helvetica, sans-serif;
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5em;