Merge pull request #2579 from Safelite/feature/CASH-824

CASH-824

src/digital-components/date-picker/date-picker.vue

@@ -913,8 +913,7 @@ export default {
 
         .month-year {
             grid-area: 1 / 1 / 2 / 5;
-            font-family: AvertaBold;
-            letter-spacing: 0.75px;
+            font-family: UrbanistBold;
             color: $black;
             justify-content: center;
             margin-bottom: 0.5rem;
@@ -1209,7 +1208,7 @@ export default {
                     border-radius: 0.25rem;
                     color: $black;
                     span {
-                        font-family: AvertaSemibold;
+                        font-family: UrbanistSemibold;
                         font-weight: 400;
                     }
                 }
@@ -1240,7 +1239,7 @@ export default {
             &.current-day {
                 label {
                     font-weight: 600;
-                    font-family: "AvertaSemibold";
+                    font-family: "UrbanistSemibold";
                     color: $black;
                     font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
                 }
@@ -1252,11 +1251,10 @@ export default {
                     text-decoration: none;
                     color: $black;
                     font-weight: 400;
-                    font-family: "AvertaSemibold";
+                    font-family: "UrbanistSemibold";
                     font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
 
                     &.price {
-                        font-family: "AvertaRegular";
                         font-weight: 400;
                     }
                 }
@@ -1274,7 +1272,7 @@ export default {
                         color: $blue;
                         span {
                             font-weight: 400;
-                            font-family: "AvertaSemibold";
+                            font-family: "UrbanistSemibold";
                         }
                     }
                 }

src/digital-components/salesforce-webchat/salesforce-webchat.vue

@@ -129,7 +129,6 @@ export default {
 <style lang="scss">
 .dockableContainer {
     &.showDockableContainer {
-        font-family: AvertaRegular;
         color: $gray-600;
         .sidebarBody {
             button {

src/experiment-components/donation-block.vue

@@ -177,13 +177,13 @@ export default {
 
     p {
         &.headline {
-            font-family: AvertaBold;
+            font-family: UrbanistBold;
             color: $red;
             font-weight: 600;
         }
 
         &.subheadline {
-            font-family: AvertaBold;
+            font-family: UrbanistBold;
             font-weight: 600;
         }
     }

src/experiment-components/service-package-radio-for-afterpay.vue

@@ -424,7 +424,6 @@ export default {
             text-transform: uppercase;
             font-size: 0.875rem;
             font-weight: 600;
-            letter-spacing: 0.75px;
         }
         .special-save-box {
             background-color: $green-100;

src/experiment-components/service-package-radio.vue

@@ -476,7 +476,6 @@ export default {
             text-transform: uppercase;
             font-size: 0.875rem;
             font-weight: 600;
-            letter-spacing: 0.75px;
         }
         .special-save-box {
             background-color: $green-100;

src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue

@@ -405,7 +405,6 @@ export default {
             text-transform: uppercase;
             font-size: 0.875rem;
             font-weight: 600;
-            letter-spacing: 0.75px;
         }
         .special-save-box {
             background-color: $green-100;

src/layouts/schedule/schedule.vue

@@ -765,7 +765,7 @@ export default {
             }
         }
         .change-location a {
-            font-family: AvertaSemibold;
+            font-family: UrbanistSemibold;
         }
         .time-slots-question {
             padding: 0 0.75rem;

src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue

@@ -631,7 +631,6 @@ export default {
             margin-left: 0.5rem;
             strong {
                 font-weight: 600;
-                letter-spacing: 0%;
             }
         }
         .success-image {

src/layouts/schedule/time-slot-question/time-slot-question.vue

@@ -561,7 +561,7 @@ export default {
     margin-top: 1.5rem;
 
     .time-slot-header {
-        font-family: AvertaBold;
+        font-family: UrbanistBold;
         margin-top: 1.5rem;
     }
     .text-block.duration-text-block {

src/styles/common-styles.scss

@@ -97,3 +97,11 @@ body {
         }
     }
 }
+button,
+input,
+select,
+textarea,
+option,
+.btn {
+    letter-spacing: 0.03rem;
+}

src/styles/common-typography-styles.scss

@@ -4,6 +4,7 @@ body {
     font-size: 1rem;
     line-height: 1.625;
     font-weight: 400;
+    letter-spacing: 0.03rem;
 }
 
 //Headings
@@ -43,7 +44,7 @@ h5,
 h6,
 .h6 {
     line-height: 1.7;
-    letter-spacing: 0.75px;
+    letter-spacing: 0.03rem;
     text-transform: uppercase;
 }
 
@@ -133,3 +134,57 @@ caption,
     font-weight: normal;
     font-style: normal;
 }
+
+@font-face {
+    font-family: "UrbanistBold";
+    src:
+        url("@/assets/fonts/Urbanist-Bold.woff") format("woff2"),
+        url("@/assets/fonts/Urbanist-Bold.woff2") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "UrbanistBold_Italic";
+    src:
+        url("@/assets/fonts/Urbanist-BoldItalic.woff") format("woff2"),
+        url("@/assets/fonts/Urbanist-BoldItalic.woff2") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "UrbanistExtraBold";
+    src:
+        url("@/assets/fonts/Urbanist-ExtraBold.woff") format("woff2"),
+        url("@/assets/fonts/Urbanist-ExtraBold.woff2") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "UrbanistRegular";
+    src:
+        url("@/assets/fonts/Urbanist-Regular.woff") format("woff2"),
+        url("@/assets/fonts/Urbanist-Regular.woff2") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "UrbanistMedium_Italic";
+    src:
+        url("@/assets/fonts/Urbanist-MediumItalic.woff") format("woff2"),
+        url("@/assets/fonts/Urbanist-MediumItalic.woff2") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "UrbanistSemibold";
+    src:
+        url("@/assets/fonts/Urbanist-SemiBold.woff") format("woff2"),
+        url("@/assets/fonts/Urbanist-SemiBold.woff2") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}

src/styles/ux-variables.scss

@@ -120,9 +120,8 @@ $theme-colors: (
 $body-color: $gray-600;
 
 //Fonts
-$font-family-sans-serif: AvertaRegular, Arial, Helvetica, sans-serif;
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
+$font-family-sans-serif: UrbanistRegular;
+$font-family-monospace: UrbanistRegular;
 // stylelint-enable value-keyword-case
 $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;