Update font to Overpass

39 files changed, 223 insertions, 207 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13d9e7ca..3ac0c0d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -290,7 +290,7 @@
 - (beta) Fixes bug where tx data was nullified when repricing a tx
 - Fix flashing Login screen after logging in or restoring from seed phrase.
 - Increase tap areas for menu buttons on mobile
-- Change all fonts in new-ui onboarding to Roboto, size 400
+- Change all fonts in new-ui onboarding to Overpass, size 400
 - Add a welcome screen to new-ui onboarding flow
 - Make new-ui create password screen responsive
 - Hide network dropdown before account is initialized
diff --git a/app/fonts/Overpass/overpass-bold-italic.ttf b/app/fonts/Overpass/overpass-bold-italic.ttf
new file mode 100644
index 00000000..b82b7456
--- /dev/null
+++ b/app/fonts/Overpass/overpass-bold-italic.ttf
diff --git a/app/fonts/Overpass/overpass-bold.ttf b/app/fonts/Overpass/overpass-bold.ttf
new file mode 100644
index 00000000..8d189ec5
--- /dev/null
+++ b/app/fonts/Overpass/overpass-bold.ttf
diff --git a/app/fonts/Overpass/overpass-extrabold-italic.ttf b/app/fonts/Overpass/overpass-extrabold-italic.ttf
new file mode 100644
index 00000000..a0331edf
--- /dev/null
+++ b/app/fonts/Overpass/overpass-extrabold-italic.ttf
diff --git a/app/fonts/Overpass/overpass-extrabold.ttf b/app/fonts/Overpass/overpass-extrabold.ttf
new file mode 100644
index 00000000..ff45a66c
--- /dev/null
+++ b/app/fonts/Overpass/overpass-extrabold.ttf
diff --git a/app/fonts/Overpass/overpass-extralight-italic.ttf b/app/fonts/Overpass/overpass-extralight-italic.ttf
new file mode 100644
index 00000000..7aca829d
--- /dev/null
+++ b/app/fonts/Overpass/overpass-extralight-italic.ttf
diff --git a/app/fonts/Overpass/overpass-extralight.ttf b/app/fonts/Overpass/overpass-extralight.ttf
new file mode 100644
index 00000000..67eca836
--- /dev/null
+++ b/app/fonts/Overpass/overpass-extralight.ttf
diff --git a/app/fonts/Overpass/overpass-heavy-italic.ttf b/app/fonts/Overpass/overpass-heavy-italic.ttf
new file mode 100644
index 00000000..15f8bc63
--- /dev/null
+++ b/app/fonts/Overpass/overpass-heavy-italic.ttf
diff --git a/app/fonts/Overpass/overpass-heavy.ttf b/app/fonts/Overpass/overpass-heavy.ttf
new file mode 100644
index 00000000..a673df51
--- /dev/null
+++ b/app/fonts/Overpass/overpass-heavy.ttf
diff --git a/app/fonts/Overpass/overpass-italic.ttf b/app/fonts/Overpass/overpass-italic.ttf
new file mode 100644
index 00000000..de3002ed
--- /dev/null
+++ b/app/fonts/Overpass/overpass-italic.ttf
diff --git a/app/fonts/Overpass/overpass-light-italic.ttf b/app/fonts/Overpass/overpass-light-italic.ttf
new file mode 100644
index 00000000..eb6c04a1
--- /dev/null
+++ b/app/fonts/Overpass/overpass-light-italic.ttf
diff --git a/app/fonts/Overpass/overpass-light.ttf b/app/fonts/Overpass/overpass-light.ttf
new file mode 100644
index 00000000..f97b2798
--- /dev/null
+++ b/app/fonts/Overpass/overpass-light.ttf
diff --git a/app/fonts/Overpass/overpass-regular.ttf b/app/fonts/Overpass/overpass-regular.ttf
new file mode 100644
index 00000000..ff8bba31
--- /dev/null
+++ b/app/fonts/Overpass/overpass-regular.ttf
diff --git a/app/images/hardware-wallet-step-2.svg b/app/images/hardware-wallet-step-2.svg
index 9fff05b7..a998d949 100644
--- a/app/images/hardware-wallet-step-2.svg
+++ b/app/images/hardware-wallet-step-2.svg
@@ -19,39 +19,39 @@
                     <g id="Group-5" transform="translate(21.000000, 0.000000)">
                         <g id="Group-7" transform="translate(0.000000, 45.000000)">
                             <rect id="Rectangle-6-Copy" stroke="#AFDFFF" fill="#FFFFFF" x="0.5" y="0.5" width="250" height="26"></rect>
-                            <text id="3" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
+                            <text id="3" font-family="Overpass-Regular, Overpass" font-size="12" font-weight="normal" fill="#ABB4BB">
                                 <tspan x="31" y="19">3</tspan>
                             </text>
-                            <text id="OXz3…T3A4" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
+                            <text id="OXz3…T3A4" font-family="Overpass-Regular, Overpass" font-size="12" font-weight="normal" fill="#ABB4BB">
                                 <tspan x="50" y="19">OXz3…T3A4</tspan>
                             </text>
-                            <text id="0.020000-ETH" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
+                            <text id="0.020000-ETH" font-family="Overpass-Regular, Overpass" font-size="12" font-weight="normal" fill="#ABB4BB">
                                 <tspan x="142" y="19">0.020000 ETH</tspan>
                             </text>
                             <circle id="Oval-Copy" stroke="#AFDFFF" stroke-width="2" cx="16.5" cy="14.5" r="6.5"></circle>
                         </g>
                         <g id="Group-7-Copy">
                             <rect id="Rectangle-6-Copy" stroke="#AFDFFF" fill="#FFFFFF" x="0.5" y="0.5" width="250" height="26"></rect>
-                            <text id="1" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
+                            <text id="1" font-family="Overpass-Regular, Overpass" font-size="12" font-weight="normal" fill="#ABB4BB">
                                 <tspan x="31" y="19">1</tspan>
                             </text>
-                            <text id="OXa4…s0a2" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
+                            <text id="OXa4…s0a2" font-family="Overpass-Regular, Overpass" font-size="12" font-weight="normal" fill="#ABB4BB">
                                 <tspan x="50" y="19">OXa4…s0a2</tspan>
                             </text>
-                            <text id="0.01500-ETH" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
+                            <text id="0.01500-ETH" font-family="Overpass-Regular, Overpass" font-size="12" font-weight="normal" fill="#ABB4BB">
                                 <tspan x="142" y="19">0.01500 ETH</tspan>
                             </text>
                             <circle id="Oval-Copy" stroke="#AFDFFF" stroke-width="2" cx="16.5" cy="14.5" r="6.5"></circle>
                         </g>
                         <g id="Group-8" transform="translate(0.000000, 71.000000)">
                             <rect id="Rectangle-6-Copy-2" stroke="#AFDFFF" fill="#FFFFFF" x="0.5" y="0.5" width="250" height="26"></rect>
-                            <text id="4" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
+                            <text id="4" font-family="Overpass-Regular, Overpass" font-size="12" font-weight="normal" fill="#ABB4BB">
                                 <tspan x="31" y="18">4</tspan>
                             </text>
-                            <text id="OXd2…D0V4" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
+                            <text id="OXd2…D0V4" font-family="Overpass-Regular, Overpass" font-size="12" font-weight="normal" fill="#ABB4BB">
                                 <tspan x="50" y="18">OXd2…D0V4</tspan>
                             </text>
-                            <text id="0.030000-ETH" font-family="Roboto-Regular, Roboto" font-size="12" font-weight="normal" fill="#ABB4BB">
+                            <text id="0.030000-ETH" font-family="Overpass-Regular, Overpass" font-size="12" font-weight="normal" fill="#ABB4BB">
                                 <tspan x="142" y="18">0.030000 ETH</tspan>
                             </text>
                             <circle id="Oval-Copy-2" stroke="#AFDFFF" stroke-width="2" cx="16.5" cy="13.5" r="6.5"></circle>
@@ -62,13 +62,13 @@
                             <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
                             <rect stroke="#3098DC" stroke-width="1" stroke-linejoin="square" fill="#D9F0FF" fill-rule="evenodd" x="0.5" y="0.5" width="293" height="31"></rect>
                         </g>
-                        <text id="2" font-family="Roboto-Regular, Roboto" font-size="16" font-weight="normal" fill="#4A4A4A">
+                        <text id="2" font-family="Overpass-Regular, Overpass" font-size="16" font-weight="normal" fill="#4A4A4A">
                             <tspan x="36" y="22">2</tspan>
                         </text>
-                        <text id="OXe7…B0a1" font-family="Roboto-Regular, Roboto" font-size="16" font-weight="normal" fill="#4A4A4A">
+                        <text id="OXe7…B0a1" font-family="Overpass-Regular, Overpass" font-size="16" font-weight="normal" fill="#4A4A4A">
                             <tspan x="58" y="22">OXe7…B0a1</tspan>
                         </text>
-                        <text id="0.041000-ETH" font-family="Roboto-Regular, Roboto" font-size="16" font-weight="normal" fill="#4A4A4A">
+                        <text id="0.041000-ETH" font-family="Overpass-Regular, Overpass" font-size="16" font-weight="normal" fill="#4A4A4A">
                             <tspan x="166" y="22">0.041000 ETH</tspan>
                         </text>
                         <circle id="Oval" stroke="#3098DC" stroke-width="2" cx="19.5" cy="16.5" r="7.5"></circle>
diff --git a/app/images/hardware-wallet-step-3.svg b/app/images/hardware-wallet-step-3.svg
index 4a7655b3..481538d5 100644
--- a/app/images/hardware-wallet-step-3.svg
+++ b/app/images/hardware-wallet-step-3.svg
@@ -31,7 +31,7 @@
                             </g>
                         </g>
                     </g>
-                    <text id="LOGIN-WITH-METAMASK" font-family="RobotoMono-Bold, Roboto Mono" font-size="10" font-weight="bold" fill="#3098DC">
+                    <text id="LOGIN-WITH-METAMASK" font-family="OverpassMono-Bold, Overpass Mono" font-size="10" font-weight="bold" fill="#3098DC">
                         <tspan x="24.4951172" y="43">LOGIN WITH </tspan>
                         <tspan x="30.4960938" y="56">METAMASK</tspan>
                     </text>
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 9e493976..9cfa8a0e 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -1,8 +1,24 @@
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 400;
-  src: local("Roboto"), local("Roboto-Regular"), url("/fonts/Roboto/Roboto-Regular.ttf") format("truetype");
+  src: local("Overpass"), local("Overpass-Regular"), url("/fonts/Overpass/overpass-regular.ttf") format("truetype");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  font-style: normal;
+  font-weight: 500;
+  src: local("Overpass"), local("Overpass-Heavy"), url("/fonts/Overpass/overpass-heavy.ttf") format("truetype");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  font-style: normal;
+  font-weight: 800;
+  src: local("Overpass"), local("Overpass-Bold"), url("/fonts/Overpass/overpass-bold.ttf") format("truetype");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
@@ -14,7 +30,7 @@
   justify-content: center;
   flex: 1 0 auto;
   font-weight: 400;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 @media screen and (min-height: 601px) {
@@ -256,11 +272,11 @@
   color: #9b9b9b;
   font-size: 16px;
   line-height: 23px;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .buy-ether__small-body-text {
-  font-family: Roboto;
+  font-family: Overpass;
   height: 14px;
   color: #757575;
   font-size: 12px;
@@ -293,7 +309,7 @@
   height: 200px;
   overflow-y: auto;
   color: #9b9b9b;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 12px;
   line-height: 15px;
   text-align: justify;
@@ -333,7 +349,7 @@
   color: #9b9b9b;
   font-size: 16px;
   line-height: 23px;
-  font-family: Roboto;
+  font-family: Overpass;
   min-width: 0;
   max-width: 100%;
 }
@@ -382,7 +398,7 @@
 .backup-phrase__secret-words {
   width: 310px;
   color: #5B5D67;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 20px;
   line-height: 26px;
   text-align: center;
@@ -411,7 +427,7 @@
   background: none;
   box-shadow: none;
   color: #FFFFFF;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 12px;
   font-weight: bold;
   line-height: 15px;
@@ -470,7 +486,7 @@ button.backup-phrase__reveal-button:hover {
 
 .backup-phrase__confirm-seed-option {
   color: #9b9b9b;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 14px;
   line-height: 18px;
   background-color: #303030;
@@ -493,7 +509,7 @@ button.backup-phrase__confirm-seed-option:hover {
 .import-account__faq-link {
   font-size: 18px;
   line-height: 23px;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .import-account__selector-label {
@@ -508,7 +524,7 @@ button.backup-phrase__confirm-seed-option:hover {
   background-color: #FFFFFF;
   margin-top: 14px;
   color: #5B5D67;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 18px;
   line-height: 23px;
   padding: 14px 21px;
@@ -523,7 +539,7 @@ button.backup-phrase__confirm-seed-option:hover {
   font-size: 18px;
   line-height: 23px;
   margin-top: 21px;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .import-account__input-wrapper {
@@ -571,7 +587,7 @@ button.backup-phrase__confirm-seed-option:hover {
   border: 1px solid #1B344D;
   border-radius: 4px;
   color: #1B344D;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 18px;
   display: flex;
   flex-flow: column nowrap;
@@ -588,7 +604,7 @@ button.backup-phrase__confirm-seed-option:hover {
 
 .import-account__file-name {
   color: #000000;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 18px;
   line-height: 23px;
   margin-left: 22px;
@@ -609,7 +625,7 @@ button.backup-phrase__confirm-seed-option:hover {
 
 .buy-ether__content-headline {
   color: #1B344D;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 18px;
   line-height: 23px;
 }
@@ -638,7 +654,7 @@ button.backup-phrase__confirm-seed-option:hover {
   align-items: center;
   padding: 20px 0;
   color: #9B9B9B;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 14px;
   line-height: 18px;
   cursor: pointer;
@@ -672,7 +688,7 @@ button.backup-phrase__confirm-seed-option:hover {
 .buy-ether__button-separator-text {
   font-size: 20px;
   line-height: 26px;
-  font-family: Roboto;
+  font-family: Overpass;
   margin: 35px 0 14px 30px;
   display: flex;
   flex-flow: column nowrap;
@@ -684,7 +700,7 @@ button.backup-phrase__confirm-seed-option:hover {
   color: #954a97 !important;
   font-size: 14px !important;
   line-height: 18px !important;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .buy-ether__action-content-wrapper {
@@ -703,7 +719,7 @@ button.backup-phrase__confirm-seed-option:hover {
   color: #FFFFFF;
   font-size: 16px;
   font-weight: 500;
-  font-family: Roboto;
+  font-family: Overpass;
   font-stretch: condensed;
   line-height: 26px;
   text-align: center;
@@ -729,7 +745,7 @@ button.first-time-flow__button:not([disabled]):hover {
   color: #1B344D;
   font-size: 20px;
   line-height: 26px;
-  font-family: Roboto;
+  font-family: Overpass;
   text-align: center;
   margin: 35px 0 14px;
   background-color: transparent;
@@ -782,7 +798,7 @@ button.first-time-flow__button--tertiary:hover {
   font-size: 20px;
   line-height: 26px;
   text-align: center;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .icon {
@@ -830,7 +846,7 @@ button.first-time-flow__button--tertiary:hover {
 .shapeshift-form__deposit-instruction {
   color: #757575;
   color: rgba(0, 0, 0, 0.45);
-  font-family: Roboto;
+  font-family: Overpass;
   font-weight: 300;
   line-height: 19px;
   padding-bottom: 6px;
@@ -847,7 +863,7 @@ button.first-time-flow__button--tertiary:hover {
   width: 100%;
   height: 45px;
   line-height: 44px;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .shapeshift-form__address-input-label {
@@ -856,7 +872,7 @@ button.first-time-flow__button--tertiary:hover {
   font-weight: 500;
   line-height: 18px;
   padding-bottom: 6px;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .shapeshift-form__address-input {
@@ -875,7 +891,7 @@ button.first-time-flow__button--tertiary:hover {
 
 .shapeshift-form__address-input-error-message {
   color: #FF001F;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 12px;
   height: 24px;
   line-height: 18px;
@@ -885,7 +901,7 @@ button.first-time-flow__button--tertiary:hover {
   display: flex;
   flex-flow: row wrap;
   color: #9B9B9B;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 10px;
   line-height: 16px;
 }
diff --git a/ui/app/components/button-group/index.scss b/ui/app/components/button-group/index.scss
index 90748bdc..59e596a4 100644
--- a/ui/app/components/button-group/index.scss
+++ b/ui/app/components/button-group/index.scss
@@ -4,7 +4,7 @@
   align-items: center;
 
   &__button {
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 1rem;
     color: $manatee;
     border-style: solid;
diff --git a/ui/app/components/gas-customization/gas-price-chart/index.scss b/ui/app/components/gas-customization/gas-price-chart/index.scss
index 09754310..55bca2c8 100644
--- a/ui/app/components/gas-customization/gas-price-chart/index.scss
+++ b/ui/app/components/gas-customization/gas-price-chart/index.scss
@@ -15,7 +15,7 @@
   }
 
   .tick text, .c3-axis-x-label, .c3-axis-y-label {
-    font-family: Roboto;
+    font-family: Overpass;
     font-style: normal;
     font-weight: bold;
     line-height: normal;
@@ -51,7 +51,7 @@
   }
 
   .custom-tooltip th {
-    font-family: Roboto;
+    font-family: Overpass;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
diff --git a/ui/app/components/modals/customize-gas/index.scss b/ui/app/components/modals/customize-gas/index.scss
index 896e53b3..9fdc539a 100644
--- a/ui/app/components/modals/customize-gas/index.scss
+++ b/ui/app/components/modals/customize-gas/index.scss
@@ -3,7 +3,7 @@
   border-radius: 4px;
   background-color: $muddy-gray;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
-  font-family: Roboto;
+  font-family: Overpass;
   display: flex;
   flex-flow: column;
 
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index a8f4c7d1..fea962be 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -119,7 +119,7 @@
     min-width: 5rem;
     padding: 8px;
     color: $dusty-gray;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 1rem;
     text-align: center;
     cursor: pointer;
diff --git a/ui/app/components/unit-input/index.scss b/ui/app/components/unit-input/index.scss
index 7af91df9..c9c0f31d 100644
--- a/ui/app/components/unit-input/index.scss
+++ b/ui/app/components/unit-input/index.scss
@@ -27,7 +27,7 @@
   &__input {
     color: $white;
     font-size: 1rem;
-    font-family: Roboto;
+    font-family: Overpass;
     border: none;
     outline: 0 !important;
     max-width: 22ch;
diff --git a/ui/app/css/itcss/components/account-dropdown-mini.scss b/ui/app/css/itcss/components/account-dropdown-mini.scss
index 36a57204..3977b2ad 100644
--- a/ui/app/css/itcss/components/account-dropdown-mini.scss
+++ b/ui/app/css/itcss/components/account-dropdown-mini.scss
@@ -1,7 +1,7 @@
 .account-dropdown-mini {
   height: 22px;
   background-color: $white;
-  font-family: Roboto;
+  font-family: Overpass;
   line-height: 16px;
   font-size: 12px;
   width: 124px;
diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
index 780a89c7..c101941a 100644
--- a/ui/app/css/itcss/components/account-dropdown.scss
+++ b/ui/app/css/itcss/components/account-dropdown.scss
@@ -1,5 +1,5 @@
 .account-dropdown-name {
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .account-dropdown-balance {
@@ -9,7 +9,7 @@
 
 .account-dropdown-edit-button {
   color: $dusty-gray;
-  font-family: Roboto;
+  font-family: Overpass;
 
   &:hover {
     color: $white;
@@ -47,7 +47,7 @@
 
   &__account-primary-balance,
   &__account-secondary-balance {
-    font-family: Roboto;
+    font-family: Overpass;
     line-height: 16px;
     font-size: 12px;
   }
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 04ad056a..efd58d0b 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -18,7 +18,7 @@
   width: 100%;
   text-transform: uppercase;
   outline: none;
-  font-family: Roboto;
+  font-family: Overpass;
 
   &--disabled,
   &[disabled] {
@@ -171,7 +171,7 @@ button.primary {
   box-shadow: 0 3px 6px rgba(247, 134, 28, 0.36);
   color: $white;
   font-size: 1.1em;
-  font-family: Roboto;
+  font-family: Overpass;
   text-transform: uppercase;
 }
 
@@ -180,7 +180,7 @@ button.primary {
   box-shadow: 0 3px 6px rgba(247, 134, 28, 0.36);
   color: #585d67; // TODO: make reusable light button color
   font-size: 1.1em;
-  font-family: Roboto;
+  font-family: Overpass;
   text-transform: uppercase;
   text-align: center;
   line-height: 20px;
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 42bbc466..19a01b40 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -1,7 +1,7 @@
 .confirm-screen-container {
   position: relative;
   align-items: center;
-  font-family: Roboto;
+  font-family: Overpass;
   flex: 1 0 auto;
   flex-flow: column nowrap;
   box-shadow: 0 2px 4px 0 rgba($black, .08);
@@ -32,7 +32,7 @@
   flex-flow: column nowrap;
   z-index: 25;
   align-items: center;
-  font-family: Roboto;
+  font-family: Overpass;
   position: relative;
   overflow-y: auto;
   overflow-x: hidden;
@@ -98,7 +98,7 @@
 
 .confirm-screen-back-button {
   color: $dexon-purple;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 1rem;
   position: absolute;
   top: 38px;
@@ -312,7 +312,7 @@ section .confirm-screen-account-number,
   font-size: 16px;
   color: $white;
   text-align: center;
-  font-family: Roboto;
+  font-family: Overpass;
   padding-top: 15px;
   padding-bottom: 15px;
   border-width: 0;
@@ -326,7 +326,7 @@ section .confirm-screen-account-number,
   background: none;
   border: none;
   opacity: 1;
-  font-family: Roboto;
+  font-family: Overpass;
   border-width: 0;
   padding-top: 15px;
   padding-bottom: 15px;
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index 9f9a040a..f2bc87b8 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -4,7 +4,7 @@
   border-radius: 4px;
   background-color: $dark-gray;
   color: $dim-gray;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 16px;
   padding: 8px 10px;
   position: relative;
@@ -15,7 +15,7 @@
 
   &__input {
     color: $white;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 22px;
     border: none;
@@ -26,7 +26,7 @@
   &__primary-currency {
     color: $white;
     font-weight: 400;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 22px;
   }
@@ -38,7 +38,7 @@
   &__converted-value,
   &__converted-currency {
     color: $dusty-gray;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 12px;
     line-height: 12px;
   }
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 209901cd..cab74597 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -8,7 +8,7 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  font-family: Roboto;
+  font-family: Overpass;
   padding: 0 16px;
 }
 
@@ -21,7 +21,7 @@
 .ellip-address {
   width: 247px;
   border: none;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 14px;
 }
 
@@ -194,7 +194,7 @@
   padding: 5px 0 31px 0;
   border: 1px solid $geyser;
   border-radius: 4px;
-  font-family: Roboto;
+  font-family: Overpass;
 
   button {
     cursor: pointer;
@@ -210,7 +210,7 @@
 
   &__text {
     margin-top: 2px;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 14px;
     line-height: 18px;
   }
@@ -253,7 +253,7 @@
     border: 1px solid $geyser;
     border-radius: 2px;
     padding: 5px 10px;
-    font-family: Roboto;
+    font-family: Overpass;
     margin-top: 7px;
     width: 286px;
   }
@@ -317,7 +317,7 @@
 
 .private-key-password::-webkit-input-placeholder {
   color: $dusty-gray;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .private-key-password-warning {
@@ -330,7 +330,7 @@
   width: 292px;
   padding: 9px 15px;
   margin-top: 18px;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .export-private-key-buttons {
@@ -358,7 +358,7 @@
 
 .private-key-password-display-textarea {
   color: $crimson;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 16px;
   line-height: 21px;
   border: none;
@@ -379,7 +379,7 @@
   position: relative;
   border: 1px solid $alto;
   box-shadow: 0 0 2px 2px $alto;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .new-account-modal-header {
@@ -434,7 +434,7 @@
   width: 100%;
   font-size: 1em;
   color: $dusty-gray;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 17px;
   margin: 0 60px;
 }
@@ -499,7 +499,7 @@
 
   &__symbol {
     color: $tundora;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 24px;
     text-align: center;
@@ -510,7 +510,7 @@
     height: 30px;
     width: 271.28px;
     color: $tundora;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 22px;
     line-height: 30px;
     text-align: center;
@@ -521,7 +521,7 @@
     height: 41px;
     width: 318px;
     color: $scorpion;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 14px;
     line-height: 18px;
     text-align: center;
@@ -551,7 +551,7 @@
     position: relative;
     border: 1px solid $alto;
     box-shadow: 0 0 2px 2px $alto;
-    font-family: Roboto;
+    font-family: Overpass;
   }
 
   &__header {
@@ -593,7 +593,7 @@
 // Deposit Ether Modal
 .deposit-ether-modal {
   border-radius: 8px;
-  font-family: Roboto;
+  font-family: Overpass;
   display: flex;
   flex-flow: column;
   height: 100%;
@@ -838,7 +838,7 @@
   position: relative;
   border: 1px solid $alto;
   box-shadow: 0 0 2px 2px $alto;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .notification-modal-header {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index fe54295c..aecb4903 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -48,7 +48,7 @@
 
 .network-name {
   padding: 0 4px;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 12px;
   flex: 1 0 auto;
   color: $dexon-purple;
@@ -145,7 +145,7 @@
   height: 25px;
   width: 120px;
   color: $white;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
@@ -155,7 +155,7 @@
   height: 36px;
   width: 265px;
   color: $dusty-gray;
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 14px;
   line-height: 18px;
 }
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 5f546dc0..a815ce23 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -14,7 +14,7 @@
 
   &__title {
     color: $white;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 32px;
     font-weight: 500;
     line-height: 43px;
@@ -31,7 +31,7 @@
       height: 54px;
       padding: 15px 10px;
       color: $dusty-gray;
-      font-family: Roboto;
+      font-family: Overpass;
       font-size: 18px;
       line-height: 24px;
       text-align: center;
@@ -77,7 +77,7 @@
 
   &__select-label {
     color: $dim-gray;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 21px;
   }
@@ -141,7 +141,7 @@
 
   &__instruction {
     color: $dim-gray;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 21px;
     align-self: flex-start;
@@ -162,7 +162,7 @@
     background-color: $dark-gray;
     margin-top: 16px;
     color: $white;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     padding: 0px 20px;
   }
@@ -384,7 +384,7 @@
     margin-bottom: 23px;
     align-self: flex-start;
     color: $scorpion;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 21px;
     font-weight: bold;
@@ -396,7 +396,7 @@
     margin-bottom: 23px;
     align-self: flex-end;
     color: $scorpion;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 21px;
     font-weight: normal;
@@ -482,7 +482,7 @@
     margin-left: 16px;
     padding: 0px;
     text-transform: uppercase;
-    font-family: Roboto;
+    font-family: Overpass;
   }
 }
 
@@ -558,7 +558,7 @@
 
   &__input-label {
     color: $dim-gray;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 21px;
     align-self: flex-start;
@@ -571,7 +571,7 @@
     border-radius: 4px;
     background-color: $dark-gray;
     color: $white;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 21px;
     margin-top: 15px;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 1aaaae4f..8ff53723 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -12,7 +12,7 @@ $wallet-view-bg: $muddy-gray;
 .main-container {
   // position: absolute;
   z-index: $main-container-z-index;
-  font-family: Roboto;
+  font-family: Overpass;
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
@@ -67,7 +67,7 @@ $wallet-view-bg: $muddy-gray;
   &__keyring-label {
     height: 50px;
     color: $dusty-gray;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 10px;
     text-align: right;
     padding: 17px 20px 0;
@@ -279,7 +279,7 @@ $wallet-view-bg: $muddy-gray;
 
 .unlock-screen-container {
   z-index: $main-container-z-index;
-  font-family: Roboto;
+  font-family: Overpass;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index 0677cad1..99268fbe 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -8,7 +8,7 @@
     flex-flow: column nowrap;
     z-index: 25;
     align-items: center;
-    font-family: Roboto;
+    font-family: Overpass;
     position: relative;
     height: 100%;
     @media screen and (max-width: $break-small) {
@@ -54,7 +54,7 @@
   }
   &__header__text {
     color: #5B5D67;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 22px;
     line-height: 29px;
     z-index: 3;
@@ -118,7 +118,7 @@
     height: 48px;
     width: 240px;
     color: $tundora;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 18px;
     line-height: 24px;
     text-align: center;
@@ -156,7 +156,7 @@
   &__row-title {
     width: 80px;
     color: $dusty-gray;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 22px;
     margin-top: 12px;
@@ -165,7 +165,7 @@
   }
   &__row-value {
     color: $scorpion;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 14px;
     line-height: 19px;
     width: 100%;
diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss
index 00a776c5..34118967 100644
--- a/ui/app/css/itcss/components/sections.scss
+++ b/ui/app/css/itcss/components/sections.scss
@@ -261,7 +261,7 @@ textarea.twelve-word-phrase {
 
 /* Info screen */
 .info-gray {
-  font-family: Roboto;
+  font-family: Overpass;
   text-transform: uppercase;
   color: $silver-chalice;
 }
@@ -271,7 +271,7 @@ textarea.twelve-word-phrase {
 }
 
 .info {
-  font-family: Roboto, Arial;
+  font-family: Overpass, Arial;
   padding-bottom: 10px;
   display: inline-block;
   padding-left: 5px;
@@ -320,7 +320,7 @@ textarea.twelve-word-phrase {
 }
 
 .buy-inputs {
-  font-family: Roboto;
+  font-family: Overpass;
   font-size: 13px;
   height: 20px;
   background: transparent;
@@ -364,7 +364,7 @@ textarea.twelve-word-phrase {
 }
 
 .ex-coins {
-  font-family: Roboto;
+  font-family: Overpass;
   text-transform: uppercase;
   text-align: center;
   font-size: 33px;
@@ -375,7 +375,7 @@ textarea.twelve-word-phrase {
 }
 
 .marketinfo {
-  font-family: Roboto;
+  font-family: Overpass;
   color: $silver-chalice;
   font-size: 15px;
   line-height: 17px;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index c6f74a9c..1ba8c7ab 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-flow: column nowrap;
   z-index: 25;
-  font-family: Roboto;
+  font-family: Overpass;
 
   @media screen and (max-width: $break-small) {
     width: 100%;
@@ -76,7 +76,7 @@
     margin: 4px 0 20px;
     font-size: 16px;
     line-height: 22.4px;
-    font-family: Roboto;
+    font-family: Overpass;
   }
 
   .send-screen-gas-input {
@@ -316,7 +316,7 @@
   display: flex;
   flex-flow: column nowrap;
   z-index: 25;
-  font-family: Roboto;
+  font-family: Overpass;
 
   &__content {
     width: 498px;
@@ -408,7 +408,7 @@
     flex-flow: column nowrap;
     z-index: 25;
     align-items: center;
-    font-family: Roboto;
+    font-family: Overpass;
     position: relative;
 
     @media screen and (max-width: $break-small) {
@@ -573,7 +573,7 @@
 
   &__form-label {
     color: $white;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 22px;
     width: 88px;
@@ -587,7 +587,7 @@
     border: 1px solid $geyser;
     border-radius: 4px;
     background-color: $dark-gray;
-    font-family: Roboto;
+    font-family: Overpass;
     line-height: 16px;
     font-size: 12px;
     color: $white;
@@ -659,7 +659,7 @@
       background-color: $dark-gray;
       color: $white;
       padding: 10px;
-      font-family: Roboto;
+      font-family: Overpass;
       font-size: 16px;
       line-height: 21px;
     }
@@ -667,7 +667,7 @@
 
   &__amount-max {
     color: $dexon-purple;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 12px;
     left: 8px;
     border: none;
@@ -735,7 +735,7 @@
     border-radius: 4px;
     background-color: $dark-gray;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
-    font-family: Roboto;
+    font-family: Overpass;
     display: flex;
     flex-flow: column;
 
@@ -862,7 +862,7 @@
     &__title {
       height: 26px;
       color: $white;
-      font-family: Roboto;
+      font-family: Overpass;
       font-size: 20px;
       line-height: 26px;
       margin-top: 17px;
@@ -872,7 +872,7 @@
       height: 38px;
       width: 314px;
       color: $dim-gray;
-      font-family: Roboto;
+      font-family: Overpass;
       font-size: 14px;
       line-height: 19px;
       margin-top: 17px;
@@ -965,7 +965,7 @@
   font-size: 1em;
   font-size: 14px;
   color: #2f9ae0;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .sliders-icon {
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index 235f551b..54dcf5eb 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -117,7 +117,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 
   &__option {
     color: $white;
-    font-family: Roboto;
+    font-family: Overpass;
     font-size: 16px;
     line-height: 21px;
     text-align: center;
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 3435353d..b005aa2b 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -30,7 +30,7 @@
     align-self: center;
     font-size: 12px;
     color: $dusty-gray;
-    font-family: Roboto;
+    font-family: Overpass;
     text-transform: uppercase;
   }
 }
@@ -175,7 +175,7 @@
 .tx-list-date {
   color: $dusty-gray;
   font-size: 12px;
-  font-family: Roboto;
+  font-family: Overpass;
 }
 
 .tx-list-identicon-wrapper {
diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss
index 59f5308f..5504e298 100644
--- a/ui/app/css/itcss/components/welcome-screen.scss
+++ b/ui/app/css/itcss/components/welcome-screen.scss
@@ -3,7 +3,7 @@
   flex-flow: column;
   justify-content: center;
   align-items: center;
-  font-family: Roboto;
+  font-family: Overpass;
   font-weight: 400;
   width: 100%;
   flex: 1 0 auto;
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index edc1157b..9a040191 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -10,7 +10,7 @@
 
 html,
 body {
-  font-family: Roboto, Arial;
+  font-family: Overpass, Arial;
   color: $white;
   font-weight: 400;
   background: $dark-gray;
diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss
index 18c444c8..b1930433 100644
--- a/ui/app/css/itcss/settings/typography.scss
+++ b/ui/app/css/itcss/settings/typography.scss
@@ -1,338 +1,338 @@
 @import url('./fonts/Font_Awesome/font-awesome.min.css');
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+  src: local('Overpass Thin'), local('Overpass-Thin'), url('fonts/Overpass/Overpass-Thin.ttf') format('truetype');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+  src: local('Overpass Thin'), local('Overpass-Thin'), url('fonts/Overpass/Overpass-Thin.ttf') format('truetype');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+  src: local('Overpass Thin'), local('Overpass-Thin'), url('fonts/Overpass/Overpass-Thin.ttf') format('truetype');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+  src: local('Overpass Thin'), local('Overpass-Thin'), url('fonts/Overpass/Overpass-Thin.ttf') format('truetype');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+  src: local('Overpass Thin'), local('Overpass-Thin'), url('fonts/Overpass/Overpass-Thin.ttf') format('truetype');
   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+  src: local('Overpass Thin'), local('Overpass-Thin'), url('fonts/Overpass/Overpass-Thin.ttf') format('truetype');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+  src: local('Overpass Thin'), local('Overpass-Thin'), url('fonts/Overpass/Overpass-Thin.ttf') format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
+  src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
+  src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
+  src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
+  src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
+  src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype');
   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
+  src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
+  src: local('Overpass Light'), local('Overpass-Light'), url('fonts/Overpass/Overpass-Light.ttf') format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  src: local('Overpass'), local('Overpass-Regular'), url('fonts/Overpass/Overpass-Regular.ttf') format('truetype');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  src: local('Overpass'), local('Overpass-Regular'), url('fonts/Overpass/Overpass-Regular.ttf') format('truetype');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  src: local('Overpass'), local('Overpass-Regular'), url('fonts/Overpass/Overpass-Regular.ttf') format('truetype');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  src: local('Overpass'), local('Overpass-Regular'), url('fonts/Overpass/Overpass-Regular.ttf') format('truetype');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  src: local('Overpass'), local('Overpass-Regular'), url('fonts/Overpass/Overpass-Regular.ttf') format('truetype');
   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  src: local('Overpass'), local('Overpass-Regular'), url('fonts/Overpass/Overpass-Regular.ttf') format('truetype');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  src: local('Overpass'), local('Overpass-Regular'), url('fonts/Overpass/Overpass-Regular.ttf') format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+  src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+  src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+  src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+  src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+  src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype');
   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+  src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+  src: local('Overpass Medium'), local('Overpass-Medium'), url('fonts/Overpass/Overpass-Medium.ttf') format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+  src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+  src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+  src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+  src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+  src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype');
   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+  src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+  src: local('Overpass Bold'), local('Overpass-Bold'), url('fonts/Overpass/Overpass-Bold.ttf') format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
+  src: local('Overpass Black'), local('Overpass-Black'), url('fonts/Overpass/Overpass-Black.ttf') format('truetype');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
+  src: local('Overpass Black'), local('Overpass-Black'), url('fonts/Overpass/Overpass-Black.ttf') format('truetype');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
+  src: local('Overpass Black'), local('Overpass-Black'), url('fonts/Overpass/Overpass-Black.ttf') format('truetype');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
+  src: local('Overpass Black'), local('Overpass-Black'), url('fonts/Overpass/Overpass-Black.ttf') format('truetype');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
+  src: local('Overpass Black'), local('Overpass-Black'), url('fonts/Overpass/Overpass-Black.ttf') format('truetype');
   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
+  src: local('Overpass Black'), local('Overpass-Black'), url('fonts/Overpass/Overpass-Black.ttf') format('truetype');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Overpass';
   font-style: normal;
   font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
+  src: local('Overpass Black'), local('Overpass-Black'), url('fonts/Overpass/Overpass-Black.ttf') format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 102e46b4..b46d7fc2 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -94,4 +94,4 @@ $sidebar-overlay-z-index: 25;
 $break-small: 575px;
 $break-midpoint: 780px;
 $break-large: 576px;
-$primary-font-type: Roboto;
+$primary-font-type: Overpass;