From 6860c6bcfd2e4fb5b86b29ab650cccb4ec6d8779 Mon Sep 17 00:00:00 2001
From: Jessica Stokes <hello@jessicastokes.net>
Date: Wed, 4 Jan 2017 20:24:27 -0800
Subject: [PATCH] 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     | 2 +-
 .../components/features/compose/components/search.jsx       | 2 +-
 app/assets/stylesheets/about.scss                           | 2 +-
 app/assets/stylesheets/application.scss                     | 2 +-
 app/assets/stylesheets/components.scss                      | 4 ++--
 app/assets/stylesheets/forms.scss                           | 6 +++---
 public/404.html                                             | 4 ++--
 public/500.html                                             | 4 ++--
 storybook/storybook.scss                                    | 2 +-
 9 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx
index d631290131..19c52550a8 100644
--- a/app/assets/javascripts/components/components/button.jsx
+++ b/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',
diff --git a/app/assets/javascripts/components/features/compose/components/search.jsx b/app/assets/javascripts/components/features/compose/components/search.jsx
index b4e618820e..e4672216b4 100644
--- a/app/assets/javascripts/components/features/compose/components/search.jsx
+++ b/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',
diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss
index 3681672d8c..620c86a677 100644
--- a/app/assets/stylesheets/about.scss
+++ b/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;
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index e4c550b818..1e571385f4 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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;
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 4f03f94e54..c2fcd76b3c 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -1,6 +1,6 @@
 .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;
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index e6d2e85a2f..b3b71b412b 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/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;
diff --git a/public/404.html b/public/404.html
index eecfd67438..fc75c78be4 100644
--- a/public/404.html
+++ b/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>
diff --git a/public/500.html b/public/500.html
index 915b890f15..d085d490b0 100644
--- a/public/500.html
+++ b/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>
diff --git a/storybook/storybook.scss b/storybook/storybook.scss
index b0145f9bda..31f11b5adf 100644
--- a/storybook/storybook.scss
+++ b/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;