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!

diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx
index d631290131f4ba4ff1da95e79e6d2a1c6fbeaa79..19c52550a8230737ddfcf30d2c6af400f7869fa2 100644 (file)
--- 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 b4e618820e12a0c8deaeb6df1ca396d38c41f4c0..e4672216b4aff292a0d247050081b9e672f41f5b 100644 (file)
--- 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 3681672d8ca1e41addf13aa98d9a4ff11294362e..620c86a677c9fe06235cfe59d0b6bfdda9ecba1c 100644 (file)
--- 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 e4c550b818553ef367b329ebc1f28a50d3f4f7d4..1e571385f4ef442042f1d09a2098e3565f57738f 100644 (file)
--- 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 4f03f94e542fa28066f580ebaca0bd132ba28193..c2fcd76b3c24c44eca5c459c00e68a3a962f129a 100644 (file)
--- 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 e6d2e85a2f2c1916e38c32755b65996167ad16f1..b3b71b412bc16879d5ccee6a1448590d1db216c7 100644 (file)
--- 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 eecfd6743820883829567f7cf687252644cc525b..fc75c78be4679989882b64e3a0267cc248e14fea 100644 (file)
--- 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 915b890f15ce20887807254de5d264625cd675f6..d085d490b0c1e2e3230702455070cc28eac8c2b2 100644 (file)
--- 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 b0145f9bda7a6d83837a8d70feea739b2a2148e8..31f11b5adfadff6e44a0a9a19c41e68c3fb6c0b5 100644 (file)
--- 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;