From 1f3c895ffb320c188b77b0036603b40a22733902 Mon Sep 17 00:00:00 2001 From: Jessica Stokes 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 @@ 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 @@ 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;