Use system fonts on more platforms

This allows other platforms such as Windows, macOS and iOS to use their system fonts rather than downloading a copy of Roboto. It also makes the app feel a little closer to native on those platforms!

app/assets/javascripts/components/components/button.jsx

@@ -27,7 +27,7 @@ const Button = React.createClass({
 
   render () {
     const style = {
-      fontFamily: 'Roboto',
+      fontFamily: 'inherit',
       display: this.props.block ? 'block' : 'inline-block',
       width: this.props.block ? '100%' : 'auto',
       position: 'relative',

app/assets/javascripts/components/features/compose/components/search.jsx

@@ -38,7 +38,7 @@ const inputStyle = {
   border: 'none',
   padding: '10px',
   paddingRight: '30px',
-  fontFamily: 'Roboto',
+  fontFamily: 'inherit',
   background: '#282c37',
   color: '#9baec8',
   fontSize: '14px',

app/assets/stylesheets/about.scss

@@ -11,7 +11,7 @@
   }
 
   h1 {
-    font: 46px/52px 'Roboto', sans-serif;
+    font: 46px/52px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     font-weight: 600;
     margin-bottom: 20px;
     color: #2b90d9;

app/assets/stylesheets/application.scss

@@ -95,7 +95,7 @@ table {
 }
 
 body {
-  font-family: 'Roboto', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   background: #282c37 image-url('background-photo.jpeg');
   background-size: cover;
   background-attachment: fixed;

app/assets/stylesheets/components.scss

 .button {
   background-color: #2b90d9;
-  font-family: 'Roboto';
+  font-family: inherit;
   display: inline-block;
   position: relative;
   box-sizing: border-box;
@@ -574,7 +574,7 @@
   resize: none;
   color: #282c37;
   padding: 7px;
-  font-family: 'Roboto';
+  font-family: inherit;
   font-size: 14px;
   margin: 0;
   resize: vertical;

app/assets/stylesheets/forms.scss

@@ -26,7 +26,7 @@ code {
     display: flex;
 
     label {
-      font-family: 'Roboto';
+      font-family: inherit;
       font-size: 16px;
       color: #fff;
       width: 100px;
@@ -48,7 +48,7 @@ code {
     margin-bottom: 5px;
 
     label {
-      font-family: 'Roboto';
+      font-family: inherit;
       font-size: 14px;
       color: white;
       display: block;
@@ -83,7 +83,7 @@ code {
     display: block;
     width: 100%;
     outline: 0;
-    font-family: 'Roboto';
+    font-family: inherit;
 
     &:invalid {
       box-shadow: none;

public/404.html

@@ -7,7 +7,7 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
   <style>
     body {
-      font-family: 'Roboto', sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background: #282c37;
       color: #9baec8;
       text-align: center;
@@ -25,7 +25,7 @@
     }
 
     .dialog h1 {
-      font: 20px/28px 'Roboto', sans-serif;
+      font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       font-weight: 400;
     }
   </style>

public/500.html

@@ -7,7 +7,7 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
   <style>
     body {
-      font-family: 'Roboto', sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background: #282c37;
       color: #9baec8;
       text-align: center;
@@ -25,7 +25,7 @@
     }
 
     .dialog h1 {
-      font: 20px/28px 'Roboto', sans-serif;
+      font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       font-weight: 400;
     }
   </style>

storybook/storybook.scss

@@ -2,7 +2,7 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500);
 
 #root {
-  font-family: 'Roboto', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   background: #282c37;
   font-size: 13px;
   line-height: 18px;