Merge pull request #48 from treehouse/TH-656-replace-gotham-rounded-with-quicksand

[DONE] TH-656: Replace Gotham Rounded with Quicksand font

Author: yaroslav-mo

TODO.md

@@ -5,7 +5,8 @@
   <link rel="icon" href="favicon.ico" type="image/x-icon">
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="preconnect" href="https://cdn.fonts.net">
-  <link href="https://cdn.fonts.net/kit/39d0ab8f-c2d6-48ee-8a04-732fec352d95/39d0ab8f-c2d6-48ee-8a04-732fec352d95.css" rel="stylesheet" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{{ site.baseurl }}/css/styleguide.css">
 </head>

_includes/head.html

@@ -5,6 +5,6 @@ html
 
 body
   font-size: 1rem
-  font-family: $gotham
+  font-family: $quicksand
   font-style: normal
-  font-weight: 400
+  font-weight: $normal

_sass/leap/_global.sass

@@ -157,10 +157,16 @@ $text-size: (
   6: 0.875rem
 );
 
-$gotham: "GothamRoundedMedium", "Helvetica", Helvetica, Arial, sans-serif;
-$bold: 500;
-
-
+// Fonts
+$sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$quicksand: "Quicksand", $sans-serif;
+
+// Font Weights
+$light: 300;
+$normal: 400;
+$medium: 500;
+$semibold: 600;
+$bold: 700;
 
 // Global Border Variables
 $border-color-dark:   #b7c0c7;

_sass/leap/_variables.scss

@@ -7,7 +7,7 @@
   color: brand-color(green)
   cursor: pointer
   display: inline-block
-  font-family: $gotham
+  font-family: $quicksand
   font-size: text-size(5)
   font-weight: $bold
   height: 40px

_sass/leap/atoms/_button.sass

@@ -70,7 +70,7 @@ $form-states: success, warning, error
   // Helper Text
   &-helper
     color: text-color(light)
-    font-weight: normal
+    font-weight: $normal
     font-size: .9rem
     margin-top: .5rem
 
@@ -166,7 +166,7 @@ $form-states: success, warning, error
     z-index: -1
     &+.form-label
       display: block
-      font-weight: normal
+      font-weight: $normal
       color: $form-color-inactive
       padding: .25rem 0
       margin-left: 25px !important
@@ -282,7 +282,7 @@ $form-states: success, warning, error
       display: block
       padding: 1em
       margin-top: 0px
-      font-weight: 500
+      font-weight: $medium
       border-bottom-left-radius: 4px
       border-bottom-right-radius: 4px
 
@@ -322,7 +322,7 @@ $form-states: success, warning, error
         position: relative
         padding: 1em
         margin-top: 0px
-        font-weight: 500
+        font-weight: $medium
         border-radius: 4px
         &:after
           bottom: 100%
@@ -414,7 +414,7 @@ $form-states: success, warning, error
     // Helper Text
     &-helper
       color: #fff
-      font-weight: normal
+      font-weight: $normal
       font-size: .9rem
       margin-top: .5rem
 
@@ -506,7 +506,7 @@ $form-states: success, warning, error
       z-index: -1
       &+.form-label
         display: block
-        font-weight: normal
+        font-weight: $normal
         color: #fff
         padding: .25rem 0
         margin-left: 25px !important

_sass/leap/atoms/_forms.sass

@@ -3,7 +3,7 @@ table
   width: 100%
   border-collapse: collapse
   th
-    font-weight: 600
+    font-weight: $semibold
   th,
   td
     text-align: left

_sass/leap/atoms/_table.sass

@@ -72,7 +72,7 @@ p
   margin: 0
 
 .regular
-  font-weight: normal !important
+  font-weight: $normal !important
 
 strong,
 .bold

_sass/leap/atoms/_typography.sass

@@ -205,6 +205,6 @@ body
   &-link
     font-size: text-size(6)
     &:focus
-      font-weight: bold
+      font-weight: $bold
     &--active
-      font-weight: bold
+      font-weight: $bold