treehouse · zapeture · Jan 31, 2025
diff --git a/TODO.md b/TODO.md
@@ -40,7 +40,7 @@ Let's utilize a mobile-first approach and have mobile be the default. The rest o
 
 Typography
 ---
-We utilize Gotham Rounded for all of our web typography. Maybe we should include a download of it for people to use while prototyping?
+We utilize Quicksand for all of our web typography. Maybe we should include a download of it for people to use while prototyping?
 
 #### Headers and Sizing
 We can provide styling for default `<h1> - <h6>`, as well as, utility classes for applying different sizes to the default elements so that we can control markup hierarchy while still applying the sizes we want visually.

diff --git a/_includes/head.html b/_includes/head.html
@@ -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:[email protected]&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{{ site.baseurl }}/css/styleguide.css">
 </head>
diff --git a/_sass/leap/_global.sass b/_sass/leap/_global.sass
@@ -5,6 +5,6 @@ html
 
 body
   font-size: 1rem
-  font-family: $gotham
+  font-family: $quicksand
   font-style: normal
-  font-weight: 400
+  font-weight: $normal
diff --git a/_sass/leap/_variables.scss b/_sass/leap/_variables.scss
@@ -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;

diff --git a/_sass/leap/atoms/_button.sass b/_sass/leap/atoms/_button.sass
@@ -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

diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.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

diff --git a/_sass/leap/atoms/_table.sass b/_sass/leap/atoms/_table.sass
@@ -3,7 +3,7 @@ table
   width: 100%
   border-collapse: collapse
   th
-    font-weight: 600
+    font-weight: $semibold
   th,
   td
     text-align: left

diff --git a/_sass/leap/atoms/_typography.sass b/_sass/leap/atoms/_typography.sass
@@ -72,7 +72,7 @@ p
   margin: 0
 
 .regular
-  font-weight: normal !important
+  font-weight: $normal !important
 
 strong,
 .bold

diff --git a/_sass/styleguide/_theme.sass b/_sass/styleguide/_theme.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
diff --git a/css/leap.css b/css/leap.css
diff --git a/css/leap.min.css b/css/leap.min.css
diff --git a/fonts/490126/020AE7F52C3DBD3A9.eot b/fonts/490126/020AE7F52C3DBD3A9.eot
diff --git a/fonts/490126/084B91A2B74C7C053.css b/fonts/490126/084B91A2B74C7C053.css
diff --git a/fonts/490126/0EB4F6E01C1B887FE.css b/fonts/490126/0EB4F6E01C1B887FE.css
diff --git a/fonts/490126/113C79FB0CFB8746E.eot b/fonts/490126/113C79FB0CFB8746E.eot
diff --git a/fonts/490126/12AED559C7C6F4707.css b/fonts/490126/12AED559C7C6F4707.css
diff --git a/fonts/490126/1B8C6C081C11F0350.css b/fonts/490126/1B8C6C081C11F0350.css
diff --git a/fonts/490126/1E9B15B140EBA8D4B.css b/fonts/490126/1E9B15B140EBA8D4B.css
diff --git a/fonts/490126/2416FBC5624BD5BEE.css b/fonts/490126/2416FBC5624BD5BEE.css
diff --git a/fonts/490126/32A530451A8E6E4E3.eot b/fonts/490126/32A530451A8E6E4E3.eot
diff --git a/fonts/490126/32A885C0EEACE1D60.css b/fonts/490126/32A885C0EEACE1D60.css
diff --git a/fonts/490126/3C7BFEC3F06339E61.eot b/fonts/490126/3C7BFEC3F06339E61.eot
diff --git a/fonts/490126/48451CFB813A01CED.css b/fonts/490126/48451CFB813A01CED.css
diff --git a/fonts/490126/5D45A1B194F1FAA74.css b/fonts/490126/5D45A1B194F1FAA74.css
diff --git a/fonts/490126/5E91ED2EB2E75FC4C.css b/fonts/490126/5E91ED2EB2E75FC4C.css
diff --git a/fonts/490126/6473AF59E13A9C16A.css b/fonts/490126/6473AF59E13A9C16A.css
diff --git a/fonts/490126/80DC696DAEC6B91E8.css b/fonts/490126/80DC696DAEC6B91E8.css
diff --git a/fonts/490126/83CC0500D746370A7.css b/fonts/490126/83CC0500D746370A7.css
diff --git a/fonts/490126/8C399091D111BE206.eot b/fonts/490126/8C399091D111BE206.eot
diff --git a/fonts/490126/92B2A7E1124E2ECF4.css b/fonts/490126/92B2A7E1124E2ECF4.css
diff --git a/fonts/490126/92F0021BE9B6B9342.css b/fonts/490126/92F0021BE9B6B9342.css
diff --git a/fonts/490126/9E2E496D0F1455795.eot b/fonts/490126/9E2E496D0F1455795.eot
diff --git a/fonts/490126/9E403FCDDA0F1BAE3.css b/fonts/490126/9E403FCDDA0F1BAE3.css
diff --git a/fonts/490126/AB417DADC99DFCBB9.css b/fonts/490126/AB417DADC99DFCBB9.css
diff --git a/fonts/490126/B4FDB622C43644FE3.css b/fonts/490126/B4FDB622C43644FE3.css
diff --git a/fonts/490126/B669ECFD1934BB601.css b/fonts/490126/B669ECFD1934BB601.css
diff --git a/fonts/490126/B77628BFA105F3282.css b/fonts/490126/B77628BFA105F3282.css
diff --git a/fonts/490126/B7FD1164BC31D2B2E.css b/fonts/490126/B7FD1164BC31D2B2E.css
diff --git a/fonts/490126/BA08EB0BC788E6378.css b/fonts/490126/BA08EB0BC788E6378.css
diff --git a/fonts/490126/BF3D87DD52F826E47.css b/fonts/490126/BF3D87DD52F826E47.css
diff --git a/fonts/490126/C18ED533458E2A064.eot b/fonts/490126/C18ED533458E2A064.eot
diff --git a/fonts/490126/D421E29F5D9FE60C0.css b/fonts/490126/D421E29F5D9FE60C0.css
diff --git a/fonts/490126/D58555D2800FE6567.css b/fonts/490126/D58555D2800FE6567.css
diff --git a/fonts/490126/D8C8D42224BAD0264.eot b/fonts/490126/D8C8D42224BAD0264.eot
diff --git a/fonts/490126/E7924389C925C648E.css b/fonts/490126/E7924389C925C648E.css
diff --git a/fonts/490126/EF7F1E11D99DAF856.css b/fonts/490126/EF7F1E11D99DAF856.css
diff --git a/fonts/490126/F9928D0677F7CA72B.css b/fonts/490126/F9928D0677F7CA72B.css
diff --git a/sass.html b/sass.html
@@ -18,9 +18,9 @@ <h3 class="m-b-05-xs">Typography</h3>
   <p class="bold">Font-family</p>
   <div class="guide-code">
 <pre class="m-tb-05-xs"><code class="language-css">.custom-element
-  font-family: $gotham
+  font-family: $quicksand
 </code></pre>
-  <p class="m-b-2-xs"><code>$gotham</code></p>
+  <p class="m-b-2-xs"><code>$quicksand</code></p>
 
   <p class="bold">Font-weight</p>
   <div class="guide-code">