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!master
@@ -27,7 +27,7 @@ const Button = React.createClass({ | |||||
render () { | render () { | ||||
const style = { | const style = { | ||||
fontFamily: 'Roboto', | |||||
fontFamily: 'inherit', | |||||
display: this.props.block ? 'block' : 'inline-block', | display: this.props.block ? 'block' : 'inline-block', | ||||
width: this.props.block ? '100%' : 'auto', | width: this.props.block ? '100%' : 'auto', | ||||
position: 'relative', | position: 'relative', | ||||
@@ -38,7 +38,7 @@ const inputStyle = { | |||||
border: 'none', | border: 'none', | ||||
padding: '10px', | padding: '10px', | ||||
paddingRight: '30px', | paddingRight: '30px', | ||||
fontFamily: 'Roboto', | |||||
fontFamily: 'inherit', | |||||
background: '#282c37', | background: '#282c37', | ||||
color: '#9baec8', | color: '#9baec8', | ||||
fontSize: '14px', | fontSize: '14px', | ||||
@@ -11,7 +11,7 @@ | |||||
} | } | ||||
h1 { | h1 { | ||||
font: 46px/52px 'Roboto', sans-serif; | |||||
font: 46px/52px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |||||
font-weight: 600; | font-weight: 600; | ||||
margin-bottom: 20px; | margin-bottom: 20px; | ||||
color: #2b90d9; | color: #2b90d9; | ||||
@@ -95,7 +95,7 @@ table { | |||||
} | } | ||||
body { | body { | ||||
font-family: 'Roboto', sans-serif; | |||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |||||
background: #282c37 image-url('background-photo.jpeg'); | background: #282c37 image-url('background-photo.jpeg'); | ||||
background-size: cover; | background-size: cover; | ||||
background-attachment: fixed; | background-attachment: fixed; | ||||
@@ -1,6 +1,6 @@ | |||||
.button { | .button { | ||||
background-color: #2b90d9; | background-color: #2b90d9; | ||||
font-family: 'Roboto'; | |||||
font-family: inherit; | |||||
display: inline-block; | display: inline-block; | ||||
position: relative; | position: relative; | ||||
box-sizing: border-box; | box-sizing: border-box; | ||||
@@ -574,7 +574,7 @@ | |||||
resize: none; | resize: none; | ||||
color: #282c37; | color: #282c37; | ||||
padding: 7px; | padding: 7px; | ||||
font-family: 'Roboto'; | |||||
font-family: inherit; | |||||
font-size: 14px; | font-size: 14px; | ||||
margin: 0; | margin: 0; | ||||
resize: vertical; | resize: vertical; | ||||
@@ -26,7 +26,7 @@ code { | |||||
display: flex; | display: flex; | ||||
label { | label { | ||||
font-family: 'Roboto'; | |||||
font-family: inherit; | |||||
font-size: 16px; | font-size: 16px; | ||||
color: #fff; | color: #fff; | ||||
width: 100px; | width: 100px; | ||||
@@ -48,7 +48,7 @@ code { | |||||
margin-bottom: 5px; | margin-bottom: 5px; | ||||
label { | label { | ||||
font-family: 'Roboto'; | |||||
font-family: inherit; | |||||
font-size: 14px; | font-size: 14px; | ||||
color: white; | color: white; | ||||
display: block; | display: block; | ||||
@@ -83,7 +83,7 @@ code { | |||||
display: block; | display: block; | ||||
width: 100%; | width: 100%; | ||||
outline: 0; | outline: 0; | ||||
font-family: 'Roboto'; | |||||
font-family: inherit; | |||||
&:invalid { | &:invalid { | ||||
box-shadow: none; | box-shadow: none; | ||||
@@ -7,7 +7,7 @@ | |||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet"> | ||||
<style> | <style> | ||||
body { | body { | ||||
font-family: 'Roboto', sans-serif; | |||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |||||
background: #282c37; | background: #282c37; | ||||
color: #9baec8; | color: #9baec8; | ||||
text-align: center; | text-align: center; | ||||
@@ -25,7 +25,7 @@ | |||||
} | } | ||||
.dialog h1 { | .dialog h1 { | ||||
font: 20px/28px 'Roboto', sans-serif; | |||||
font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |||||
font-weight: 400; | font-weight: 400; | ||||
} | } | ||||
</style> | </style> | ||||
@@ -7,7 +7,7 @@ | |||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet"> | ||||
<style> | <style> | ||||
body { | body { | ||||
font-family: 'Roboto', sans-serif; | |||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |||||
background: #282c37; | background: #282c37; | ||||
color: #9baec8; | color: #9baec8; | ||||
text-align: center; | text-align: center; | ||||
@@ -25,7 +25,7 @@ | |||||
} | } | ||||
.dialog h1 { | .dialog h1 { | ||||
font: 20px/28px 'Roboto', sans-serif; | |||||
font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |||||
font-weight: 400; | font-weight: 400; | ||||
} | } | ||||
</style> | </style> | ||||
@@ -2,7 +2,7 @@ | |||||
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500); | @import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500); | ||||
#root { | #root { | ||||
font-family: 'Roboto', sans-serif; | |||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |||||
background: #282c37; | background: #282c37; | ||||
font-size: 13px; | font-size: 13px; | ||||
line-height: 18px; | line-height: 18px; | ||||