Change fonts in new-ui onboarding to Roboto, with weight 400.

1 files changed, 31 insertions, 23 deletions

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index f59eb4ce1..e8a50d988 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -1,3 +1,10 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
 
 .first-time-flow {
   width: 100vw;
@@ -6,6 +13,7 @@
   display: flex;
   justify-content: center;
   flex: 1 0 auto;
+  font-weight: 400;
 }
 
 .alpha-warning {
@@ -180,11 +188,11 @@
   color: #1B344D;
   font-size: 16px;
   line-height: 23px;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .buy-ether__small-body-text {
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
   height: 14px;
   color: #757575;
   font-size: 12px;
@@ -212,7 +220,7 @@
   height: 334px;
   overflow-y: auto;
   color: #757575;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
   font-size: 12px;
   line-height: 15px;
   text-align: justify;
@@ -237,7 +245,7 @@
   color: #5B5D67;
   font-size: 16px;
   line-height: 23px;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .backup-phrase__secret {
@@ -255,7 +263,7 @@
 .backup-phrase__secret-words {
   width: 310px;
   color: #5B5D67;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 20px;
   line-height: 26px;
   text-align: center;
@@ -284,7 +292,7 @@
   background: none;
   box-shadow: none;
   color: #FFFFFF;
-  font-family: Montserrat Regular;
+  font-family: Roboto;
   font-size: 12px;
   font-weight: bold;
   line-height: 15px;
@@ -338,7 +346,7 @@ button.backup-phrase__reveal-button:hover {
 
 .backup-phrase__confirm-seed-option {
   color: #5B5D67;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 16px;
   line-height: 21px;
   background-color: #E7E7E7;
@@ -360,7 +368,7 @@ button.backup-phrase__confirm-seed-option:hover {
 .import-account__faq-link {
   font-size: 18px;
   line-height: 23px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
 }
 
 .import-account__selector-label {
@@ -375,7 +383,7 @@ button.backup-phrase__confirm-seed-option:hover {
   background-color: #FFFFFF;
   margin-top: 14px;
   color: #5B5D67;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   line-height: 23px;
   padding: 14px 21px;
@@ -390,7 +398,7 @@ button.backup-phrase__confirm-seed-option:hover {
   font-size: 18px;
   line-height: 23px;
   margin-top: 21px;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .import-account__input-wrapper {
@@ -436,7 +444,7 @@ button.backup-phrase__confirm-seed-option:hover {
   border: 1px solid #1B344D;
   border-radius: 4px;
   color: #1B344D;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   display: flex;
   flex-flow: column nowrap;
@@ -453,7 +461,7 @@ button.backup-phrase__confirm-seed-option:hover {
 
 .import-account__file-name {
   color: #000000;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   line-height: 23px;
   margin-left: 22px;
@@ -474,7 +482,7 @@ button.backup-phrase__confirm-seed-option:hover {
 
 .buy-ether__content-headline {
   color: #1B344D;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   line-height: 23px;
 }
@@ -503,7 +511,7 @@ button.backup-phrase__confirm-seed-option:hover {
   align-items: center;
   padding: 20px 0;
   color: #9B9B9B;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 14px;
   line-height: 18px;
   cursor: pointer;
@@ -538,7 +546,7 @@ button.backup-phrase__confirm-seed-option:hover {
 .buy-ether__button-separator-text {
   font-size: 20px;
   line-height: 26px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   margin: 35px 0 14px 30px;
   display: flex;
   flex-flow: column nowrap;
@@ -550,7 +558,7 @@ button.backup-phrase__confirm-seed-option:hover {
   color: #1B344D !important;
   font-size: 14px !important;
   line-height: 18px !important;
-  font-family: Montserrat UltraLight !important;
+  font-family: Roboto;
 }
 
 .buy-ether__action-content-wrapper {
@@ -608,7 +616,7 @@ button.first-time-flow__button:hover {
   color: #1B344D;
   font-size: 20px;
   line-height: 26px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   text-align: center;
   margin: 35px 0 14px;
   background-color: transparent;
@@ -660,7 +668,7 @@ button.first-time-flow__button--tertiary:hover {
   font-size: 20px;
   line-height: 26px;
   text-align: center;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .icon {
@@ -708,7 +716,7 @@ button.first-time-flow__button--tertiary:hover {
 .shapeshift-form__deposit-instruction {
   color: #757575;
   color: rgba(0, 0, 0, 0.45);
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-weight: 300;
   line-height: 19px;
   padding-bottom: 6px;
@@ -725,7 +733,7 @@ button.first-time-flow__button--tertiary:hover {
   width: 100%;
   height: 45px;
   line-height: 44px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
 }
 
 .shapeshift-form__address-input-label {
@@ -734,7 +742,7 @@ button.first-time-flow__button--tertiary:hover {
   font-weight: 500;
   line-height: 18px;
   padding-bottom: 6px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
 }
 
 .shapeshift-form__address-input {
@@ -753,7 +761,7 @@ button.first-time-flow__button--tertiary:hover {
 
 .shapeshift-form__address-input-error-message {
   color: #FF001F;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 12px;
   height: 24px;
   line-height: 18px;
@@ -763,7 +771,7 @@ button.first-time-flow__button--tertiary:hover {
   display: flex;
   flex-flow: row wrap;
   color: #9B9B9B;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 10px;
   line-height: 16px;
 }